SASS/SCSS入门笔记

什么是SASS?

SASS(Syntactically Awesome Stylesheets)是一种动态样式语言,为CSS融入了编程元素,提供了很多便利的写法,使得CSS的开发变得简单、可维护。先来回顾一下CSS,接触过WEB开发的同学,肯定都了解CSS(级联样式表)。通常,我们使用CSS定义页面需要的样式规则,然后为页面中的目标元素设置或者更改样式。作为一种样式表语言,CSS旨在方便的分离设计和内容展现,便于我们去维护页面的样式。

然而对于大部分编程人员来说,写css样式往往是一件非常痛苦的事情。他们会感觉到各种约束,为什么我不能定一个变量来避免那些类似“变量”的重复书写?为什么我不能继承上个class的样式定义?...SASS正是帮编程人员解开了这些疑惑,让css看起来更像是一门编程语言。

sass-logo-wall.jpg

到底是SASS还是SCSS?

SASS最初的语法规则是缩进语法,它没有括号、分号、使用两个空格缩进来定义代码的嵌套方式,该语法形式的文件以 .sass 为后缀名。

然而SASS的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到SASS里面,因此SASS语法进行了改良,SASS 3就变成了SASS(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进,文件以 .scss 为后缀名。

So,到底是用SASS还是SCSS,各位同学依个人口味酌量添加~

安装

SASS基于Ruby语言开发而成,因此安装SASS前需要安装Ruby。ruby安装完成后,我们就可以安装SASS了,命令如下:

gem install sass

安装完后,验证下是否安装成功,我们继续输入如下命令:

sass -v

如安装成功后,会显示当前SASS的版本号:

Sass 3.x.x (Selective Steve)

常用命令

无论是SASS还是SCSS都支持CSS的写法,个人还是习惯SCSS的语法规则。

将SCSS文件转译成CSS文件,命令如下:

sass base.scss base.css

SASS提供四种编译风格

  • nested:嵌套缩进的css代码(默认);
  • expanded:没有缩进的、扩展的css代码;
  • compact:简洁格式的css代码;
  • compressed:压缩后的css代码;

生产环境当中,一般使用最后一个选项,例:

sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。

// 监听一个SASS文件
sass --watch input.scss:output.css

// 监听文件夹下面的SASS文件
sass --watch app/sass:public/stylesheets

更多命令可参考SASS的帮助选项,命令行内输入sass -h即可。

基本语法规则

变量

SASS要求变量需要以$开头声明,如下:

// 定义变量
$var : left;
div {
     float : $var;
 }

// 编译后
div {
    float : left;
}

变量名中不区分下划线和中划线,如:

// 变量名中含有下划线或中划线
$margin-left : 20px;
div {
    margin-left : $margin_left;
}

// 编译后
div {
    margin-left : 20px;
}

字符串中引用变量,需要用#{}将变量包起来引用,如下:

// 字符串中引用变量
$right : 20;
.mr-#{$right} {
    margin-right : #{$right}px;
}

// 编译后
.mr-20 {
    margin-right : 20px;
}

注释

SASS共有两种注释风格:

  • 标准的CSS注释 /* comment */ ,会保留到编译后的文件;
  • 单行注释 // comment,只保留在SASS源文件中,编译后被省略;

嵌套

我们之前在维护CSS文件的时候,一定遇到过这种情况。当我们写后代选择器时,需要指定父选择器,同样的父选择器会重复写好多次,比如:

#content article h1 { color : #333 }
#content article p { margin-bottom : 1.4em }
#content aside { background-color : #EEE }
...

在SASS里面支持嵌套的方式,规避了上述问题,并且提高了代码的可读性,上例中代码可以在SASS中定义如下:

// 嵌套CSS规则
#content {
    article {
        h1 {
            color : #333;
        }
        p {
            margin-bottom : 1.4em;
        }
    }
    aside {
        background-color : #EEE;
    }
}

在嵌套规则中,我们可以用&来表示父选择器的引用,往往在一些伪类样式中会用到,例如:

// 父选择器标识符
article a { 
    color : blue; 
    &:hover { color : red }
}

// 编译后
article a { 
    color : blue;     
}

article a : hover { 
    color : red;  
}

除了选择器的嵌套,SASS中还支持属性的嵌套,如下:

// 属性嵌套
nav { 
    border : 1px solid #ccc { 
        left : 0px; 
        right : 0px; 
    }
}

// 编译后
nav { 
    border : 1px solid #ccc; 
    border-left : 0px; 
    border-right : 0px;
}

@import 导入

@import命令,用来导入外部文件:

@import "path/filename.scss";

如果插入的是.css文件,则等同于css的import命令:

@import "foo.css";

混合器

SASS中还提供一种混合器(mixin),它可以帮我们规避大段样式的重用,混合器通过@mixin标识声明,示例如下:

// 混合器示例
@mixin rounded-corners { 
    -moz-border-radius : 5px; 
    -webkit-border-radius : 5px; 
    border-radius : 5px;
}

notice { 
    background-color : green; 
    border : 2px solid #00aa00; 
    @include rounded-corners;
}

// 编译后
.notice { 
    background-color : green; 
    border : 2px solid #00aa00; 
    -moz-border-radius : 5px; 
    -webkit-border-radius : 5px; 
    border-radius : 5px;
}

混合器支持我们传入自定义参数和设置默认参数,当设置默认参数时使用$name: default-value的声明形式,默认值可以是任何有效的css属性值,例:

// 带参数的混合器
@mixin link-colors ( 
    $normal, 
    $hover: $normal, 
    $visited: $normal 
) { 
    color: $normal; 
    &:hover { color: $hover; } 
    &:visited { color: $visited; }
}

a {
    @include link-colors(red);
}

// 编译后
a { 
    color: red; 
    &:hover { color: red; } 
    &:visited { color: red; }
}

@extend 继承

SASS中支持选择器的继承,通过@extend关键字实现,例如:

// 选择器的继承
.class1 {
    background-color : #fff;
}

.class2 {
    @extend .class1;
    color : black;
}

// 编译后
.class1 {
    background-color : #fff;
}

.class2 {
    background-color : #fff;
    color : black;
}

通过继承的实现,往往可以精简我们的css文件。

条件分支

@if可以用来判断:

p {
  @if 1 + 1 == 2 { border : 1px solid; }
  @if 5 < 3 { border : 2px dotted; }
}

// 编译后
p {
    border : 1px solid; 
}

同时还支持@else命令:

body {
    @if 1 > 0 {
      background-color :  #000;
    } @else {
      background-color :  #fff;
}

// 编译后
body {
    background-color :  #000;
}

循环

SASS支持for循环和while循环:

// for循环
@for $i from 1 to 3 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

// while循环
$i : 1;
@while $i < 3 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
  $i: $i + 1;
}

// 编译后
.border-1 {
  border: 1px solid blue;
}

.border-2 {
  border: 2px solid blue;
}

.border-3 {
  border: 3px solid blue;
}

each命令用来遍历指定参数集合:

@each $member in a, b, c {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}

// 编译后
.a {
  background-image: url("/image/a.jpg");
}

.b {
  background-image: url("/image/b.jpg");
}

.c {
  background-image: url("/image/c.jpg");
}

自定义函数

SASS允许用户编写自定义函数,用@function声明,可以传递参数或者设置默认参数,@return返回处理结果:

// 自定义函数
@function double($n:5px) {
  @return $n * 2;
}
#sidebar {
  width: double();
}

// 编译后
#sidebar {
  width: 10px;
}

参考

http://www.sass.hk/sass-course.html
http://www.ruanyifeng.com/blog/2012/06/sass.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容