这次给大家带来SASS的第一次使用，SASS第一次使用的注意事项有哪些，下面就是实战案例，一起来看一下。

SASS初体验

标签（空格分隔）： sass scss css

1. 编译环境
需要安装Ruby,之后需要打开Start Command Prompt with Ruby运行

gem install sass

登录后复制

2. 命令行编译

sass /style.scss:/style.css

登录后复制

多文件编译 (必须用–watch?反正我不加watch就会报错)

sass --watch sass/:css/

登录后复制

开启watch

sass --watch /style.scss:/style.css

登录后复制

输出方式 –style [nested(末尾花括号不换行)|expanded(完全展开)|compact(单行)|compressed(压缩)]

sass --watch sass/:css/ --style compressed

登录后复制

3. 基本语法

(1). 嵌套

和less差不多。

nav {    color: blue;    li {        color: yellow;        a {            color: red;            header & {                color: green;            }        }    }}

登录后复制

编译后

nav {  color: blue;}nav li {  color: yellow;}nav li a {  color: red;}header nav li a {  color: green;}

登录后复制

属性嵌套(相同属性前缀), 而且前缀冒号后可以加属性

.box {    font: 12px/24px {        size: 12px;        weight: bold;    }}

登录后复制

编译后

.box { font: 12px/24px; font-size: 12px; font-weight: bold; }

登录后复制

伪类嵌套，和less一毛一样

.clearfix {    &:before,    &:after {        content: "";        display: table;    }    &:after {        clear: both;        overflow: hidden;    }}

登录后复制

编译后

.clearfix:before, .clearfix:after {  content: "";  display: table;}.clearfix:after {  clear: both;  overflow: hidden;}

登录后复制

父选择器&可以作为选择器的第一个字符，比如

.btn {    padding: 4px 12px;    font-size: 16px;    border: 1px solid #ddd;    color: #333;    &-primary {        border-color: #ff5f00;        background: #ff5f00;        color: #fff;    }}

登录后复制

编译后

.btn, .btn-primary { padding: 4px 12px; font-size: 16px; border: 1px solid #ddd; color: #333; }.btn-primary { border-color: #ff5f00; background: #ff5f00; color: #fff; }

登录后复制

(2). 注释

/**/会出现在编译后文件中 amazing!
//不会

// 方向/*方向*/$d: "right";.box {    @extend %border-#{$d};}/*位置*/

登录后复制

编译后

.box {  border-right: 2px solid #ddd;}/*方向*//*位置*/

登录后复制

(3). 变量

$[变量名]: [值]
块级作用域
!global声明可以将局部转变为全局变量
默认变量；普通变量会覆盖默认变量

$size: 16px;$size: 14px !default;p.p-1 {    font-size: $size;}

登录后复制

编译后 p.p-1{font-size:16px}

(4). 运算

+, -, *, /, %
, = 也可用于数字运算 ==, != 可用于所有注意事项
不同单位不能作运算
可以进行字符串拼接；且有无引号根据左边的决定
除法需要在数学表达式中，两个普通属性需要用括号括起来，比如

.box {    width: (100px / 2);}

登录后复制

编译后

.box {  width: 50px;}

登录后复制

插值语句包裹的变量不做除法运算

p {    $font-size: 12px;    $line-height: 30px;    font: #{$font-size}/#{$line-height};}

登录后复制

编译后

p { font: 12px/30px; }

登录后复制

颜色计算分段(按照红绿蓝分别)
颜色函数
其中fade-in($color, $amount)等方法, color参数只能为rgba()颜色，不同于less

(5). 混合

用于定义可重复使用的样式 注意语法不带点，参数默认值也同less一样
@mixin [mixin-name]([$param1, $param2: default-value]) { … }
使用: @include [mixin-name](value1, value2);

对于不定参数，使用 …, 比如

@mixin box-shadow($shadows...) {     -moz-box-shadow: $shadows;     -webkit-box-shadow: $shadows;     box-shadow: $shadows; }

登录后复制

(6). 继承

@extend .[class]

还可以继承任何定义给单个元素的选择器，比如@extend a:hover;

.btn {    border: 1px solid #999;    padding: 4px 12px;    font-size: 14px;    background: #ddd;    color: #333;}.btn-primary {    background: #ff5f00;    color: #fff;    @extend .btn;}

登录后复制

编译后

.btn, .btn-primary {  border: 1px solid #999;  padding: 4px 12px;  font-size: 14px;  background: #ddd;  color: #333;}.btn-primary {  background: #ff5f00;  color: #fff;}

登录后复制

占位符%
用占位符声明的代码，不被@extend调用就不会被编译
相同样式的会通过,合在一起，减少代码量

%box-padding {    padding: 4px 12px;}.box {    font-size: 14px;    @extend %box-padding;}.box-2 {    font-size: 18px;    @extend %box-padding;}

登录后复制

编译后

.box, .box-2 {  padding: 4px 12px;}.box {  font-size: 14px;}.box-2 {  font-size: 18px;}

登录后复制

(7). 插值

通过 #{} 插值语句可以在选择器或属性名中使用变量
#{$[param]}用法，可以用在@each，@extend，多行注释

$border-properties: (border);@mixin set-border($direction, $val) {    @each $prop in $border-properties {        #{$prop}-#{$direction}: $val;    }}.box {    @include set-border(left, 1px solid #ddd);}

登录后复制

编译后

.box {  border-left: 1px solid #ddd;}

登录后复制

%border-right {    border-right: 2px solid #ddd;}$d: "right";.box {    @extend %border-#{$d};}

登录后复制

编译后

.box {  border-right: 2px solid #ddd;}

登录后复制

(8). 导入

@import可以导入多个文件，比如@import “rounded-corners”, “text-shadow”;

导入文件可以通过url()的方式使用插值语句#{}，比如@import url(“http://fonts.googleapis.com/css?family=#{$family}”);

如果想使一个sass文件只作为导入文件，不进行编译，在文件名前加_即可，比如文件命名为_colors.scss，使用@import “colors”;导入，注意文件夹下不能再有colors.scss文件。

可以用在嵌套中，作用域就只在当前嵌套中了，很赞；但是不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

(9). 注意事项 @media

用法同css

可以写在嵌套中，编译后将会编译在最外层，且里面的选择器会是嵌套时候的选择器
比如

.sidebar {    width: 300px;    @media screen and (orientation: landscape) {        width: 500px;    }}

登录后复制

.sidebar { width: 300px; }@media screen and (orientation: landscape) { .sidebar { width: 500px; } }

登录后复制

media的查询条件可以使用插值语句

media的查询条件可以嵌套

(10). @at-root

将嵌套的选择器提升到当前文档最顶层， 比如

.parent {    font-size: 14px;    @at-root .child-a {        font-size: 16px;        @at-root .child-c {            font-size: 18px;        }    }    .child-b {        font-size: 12px;    }}

登录后复制

.parent { font-size: 14px; }.child-a { font-size: 16px; }.child-c { font-size: 18px; }.parent .child-b { font-size: 12px; }

登录后复制

@at-root (without: [directive1 directive2 …])可以排除前面的指令

括号后面不能有选择器，没有括号必须有选择器

@media .print {    .page {        width: 8in;        @at-root (without: media) {            color: red;        }    }}// 没有without@media print {    .page {        width: 8in;        @at-root .p {            color: red;        }    }}

登录后复制

@media .print { .page { width: 8in; } }.page { color: red; }@media print { .page { width: 8in; }  .p { color: red; } }

登录后复制

(11). 控制指令

主要与混合指令 (mixin) 配合使用,
这是less中所没有的，less通过其它方式可以实现类似的效果，比如循环，less可以通过递归配合when关键字来实现：.loop(@counter) when (@counter > 0) { .loop((@counter – 1)); }

@if 表达式返回值不是 false 或者 null 时，执行 {} 内的样式，同样还有@else if和@else

@for 语法：@for $var from through 或者 @for $var from to
和 必须为整数
through 包含 和 的值，而 to 只包含

@each 语法： $var in
值为列表
比如

$arr: a, b, c, d, e;@each $img in $arr {    .box-#{$img} {        background: url('/img/#{$img}.png') no-repeat;    }}

登录后复制

.box-a { background: url("/img/a.png") no-repeat; }.box-b { background: url("/img/b.png") no-repeat; }.box-c { background: url("/img/c.png") no-repeat; }.box-d { background: url("/img/d.png") no-repeat; }.box-e { background: url("/img/e.png") no-repeat; }

登录后复制

可以循环注意事项，比如

$list: (aa, pen), (bb, apple), (cc, bag);@each $var, $img in $list {    .box-#{$var} {        background: url('/img/#{$img}.png') no-repeat;    }}

登录后复制

.box-aa { background: url("/img/pen.png") no-repeat; }.box-bb { background: url("/img/apple.png") no-repeat; }.box-cc { background: url("/img/bag.png") no-repeat; }

登录后复制

使用map数组或许更为明了：

$list-2: (aaa: yellow, bbb: blue, ccc: red);@each $key, $color in $list-2 {    .box-#{$key} {        background: #{$color};    }}

登录后复制

.box-aaa { background: yellow; }.box-bbb { background: blue; }.box-ccc { background: red; }

登录后复制

@while 循环，语法：@while [conditions] { … }

(12). 其它

@debug 可以输出信息到编译器

@warn 将SassScript表达式的值打印到标准错误输出流。

@error 抛出SassScript表达式的值作为致命错误

@function 注意事项

@function [function-name]([params]) {    @return [value];}

登录后复制

The end…    Last updated by: Jehorn, Mar 13, 2018, 12:10 PM

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

注意事项

注意事项

以上就是SASS的第一次使用的详细内容，更多请关注【创想鸟】其它相关文章！