SASS用法详解

头像
Heyson
    阅读 7 分钟
    2

    SASS 是 CSS 预处理器的简称。本文太长，工作中用的最多的就是嵌套混合和集成，可以搜索来跳转！

    SASS 编译环境 (SASS 最终需要编译为 CSS 才能运行)

    • koala (一款拥有图片界面的编译工具，已停止更新)

    • 命令行的方式编译（推荐）：

      • 先安装Ruby环境 https://rubyinstaller.org/

        • 安装路径中不能有中文，和特殊符号
        • ruby 一定要添加到环境变量
      • gem install sass Ruby环境安装后，执行此命令安装 sass 预处理器

    SASS 文件后缀是.scss

    sass中的注释

    //这样的注释不会被编译

/* 
* 这样的注释会被编译到输出文件中
*/

    SASS 基本 .scss 文件的编译命令

    sass style.scss style_out.css

    SASS --watch 监听指定单文件或文件夹

    监听单个文件

    sass --watch style.scss:style_out.css

    监听文件夹

    sass --watch somefolder:somefolder_out

    其中somefolder为执行命令目录下的文件夹，输出文件夹somefolder_out名称自定义，没有的话会自动创建

    　SASS 四种输出模式

    1. 嵌套输出方式 nested
    2. 展开输出方式 expanded
    3. 紧凑输出方式 compact
    4. 压缩输出方式 compressed

    以 style.scss 文件为例

    @charset "utf-8";
#box{
    width:400px;
    height:400px;
    border:1px solid gray;
    h1{
        font-size:22px;
        color:red;
    }
    p{
        font-size:18px;
        color:green;
    }
}
    1. 嵌套输出方式，命令为 sass style.scss:style.css --style nested 
    #box {
  width: 400px;
  height: 400px;
  border: 1px solid gray; }
  #box h1 {
    font-size: 22px;
    color: red; }
  #box p {
    font-size: 18px;
    color: green; }/*代码有缩进*/
    1. 展开输出方式常用，命令为 sass style.scss:style.css --style expanded 
    #box {
  width: 400px;
  height: 400px;
  border: 1px solid gray;
}
#box h1 {
  font-size: 22px;
  color: red;
}
#box p {
  font-size: 18px;
  color: green;
}/*代码没有缩进，和我们平常编写的css格式一样*/
    1. 紧凑输出方式，命令为 sass style.scss:style.css --style compact 
    #box { width: 400px; height: 400px; border: 1px solid gray; }
#box h1 { font-size: 22px; color: red; }
#box p { font-size: 18px; color: green; }/*一条规则占一行*/
    1. 压缩输出方式，命令为 sass style.scss:style.css --style compressed 
    #box{width:400px;height:400px;border:1px solid gray}#box h1{font-size:22px;color:red}#box p{font-size:18px;color:green}
/*一条规则占一行*/

    SASS变量和作用域

    e.g.还是在style.scss中

    @charset "utf-8";
$width:300px;
$height:200px;
$bgc: red;//变量多值如何调用？ 
//$bgc: red, pink; background-color:nth($bgc, 1);取第一个变量red
//$bgc: red, pink; background-color:nth($bgc, 2);取第二个变量pink
$color: #666;
$yahei: '"Microsoft YaHei", "微软雅黑"';
$bor:10px solid red;//sass允许多值变量

    变量作用域

    $color:red;
body {
$color:blue;
//选择器内部的$color变量会把外部的$color覆盖，和js差不多
//同时，选择器内部的变量，外部无法调用
}

    SASS 嵌套语法

    • 选择器嵌套
    • 属性嵌套(了解即可，用途不大)
    • 跳出嵌套，@at-root 既然要跳出，直接写成全局样式也可以的，所以这应该是特殊情况下使用的！

    嵌套是SASS里面最好用的东西，我们可以按照DOM结构的层级关系来写css样式

    //选择器嵌套
body {
 p {
   font-size: 16px;
 }
}
//属性嵌套加 在属性前缀加冒号 如font: 
//类似像font-size:16px;font-color:#ccc;font-style:normal;font-weight:bold;可以写成
.box {
  font: {
    size: 16px;
    color: #ccc;
    style: normal;
    weight: bold;
  }
}

    //单个选择器跳出
.parent-2 {
    color:#f00;
    @at-root .child {
        width:200px;
    }
}

//多个选择器跳出
.parent-3 {
    background:#f00;
    @at-root {
        .child1 {
            width:300px;
        }
        .child2 {
            width:400px;
        }
    }
}

//其实@at-root是有一个默认值@at-root(without:rule)
//除此之外，它还有四个值
//1、all（表示所有）
//2、rule（表示常规css）
//3、media（表示media）
//4、support（表示support，因为@support目前还无法广泛使用，所以在此不表示）。

    @at-root (without: …)和@at-root (with: …)

    /*跳出父级元素嵌套*/
@media print {
    .parent1{
        color:#f00;
        @at-root .child1 {
            width:200px;
        }
    }
}

/*跳出media嵌套，父级有效*/
@media print {
    .parent2{
        color:#f00;
        @at-root (without: media) {
            .child2 {
                width:200px;
            }
        }
    }
}

/*跳出media和父级*/
@media print {
    .parent3{
        color:#f00;
        @at-root (without: all) {
            .child3 {
                width:200px;
            }
        }
    }
}

    css结果是

    @charset "UTF-8";
/*跳出父级元素嵌套*/
@media print {
  .parent1 {
    color: #f00;
  }
  .child1 {
    width: 200px;
  }
}

/*跳出media嵌套，父级有效*/
@media print {
  .parent2 {
    color: #f00;
  }
}

.child2 {
  width: 200px;
}

/*跳出media和父级*/
@media print {
  .parent3 {
    color: #f00;
  }
}

.child3 {
  width: 200px;
}

    @at-root与 & 配合使用

    .child{
    @at-root .parent &{
        color:#f00;
    }
}

    css输出

    .parent .child {
  color: #f00;
}

    @mixin 声明混合，可理解为js中的函数。

    @mixin 和 @include是成对出现的，就像js中的定义函数和调用函数成对出现一样。

    //声明混合
@mixin bgc() {
  opacity: #f00;
}

//在选择器内可以使用@include调用混合
.demo {
  @include bgc();
}

    @mixin 混合传参和默认参数

    //声明混合，不带参数。正常使用，没毛病

//声明混合，带参数，调用混合时不传参数，编译后的文件会报错

//声明混合，带参数。正常使用，没毛病！

//混合中参数有默认值，调用时候的参数是可选的！

//混合中，形参加三个点的运算符@mixin bgc($bgc...),调用时可以传递多个参数。有点类似js中的展开运行符
//只不过SASS中是将三个点写在后面，js中是写在前面
    //声明混合
@mixin bgc($bgc) {
  opacity: $bgc;
}

.demo {
  @include bgc(#f00);
}

    混合中默认参数的写法

    //声明混合
@mixin bgc($bgc:#00f) {
  opacity: $bgc;
}

//传参时，默认参数不生效，不传参数的时候，默认值生效
.demo {
  @include bgc(#f00);
}

    if else if 条件判断

    $type: audi;
p {
  @if $type == benz {
    color: red;
  } @else if $type == mahindra {
    color: blue;
  } @else if $type == audi {
    color: green;
  } @else {
    color: black;
  }
}

    css中输出为

    p {
  color: green; 
}

    通过sass的@if,@else if语法,根据传入参数,实现动态输出css样式

    // 画三角形@mixin声明
@mixin sj($fx:top,$size:100px,$color:red){

  @if ($fx == top) {
    border-color: transparent transparent $color transparent;
    border-style: dashed dashed solid dashed;
  }
  @else if($fx == right){
    border-color: transparent transparent transparent $color;
    border-style: dashed dashed dashed solid;
  }
  @else if($fx == bottom){
    border-color: $color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
  }
  @else if($fx == left){
    border-color: transparent $color transparent transparent;
    border-style: dashed solid dashed dashed;
  }

  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: $size;

}

//mixin的调用
.demo{
  @include sj(left);
}

    编译后的css

    .demo {
  border-color: transparent red transparent transparent;
  border-style: dashed solid dashed dashed;
  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: 100px; }

    SASS 继承 中的 @extend

    @extend让你能够在多个选择器中通过继承的方式共享一段样式:
    有个问题就是, 如果你不可能用到.fl这个类,而它还是会出现在输出结果中！
    占位符选择器% 可以解决这个问题

    .fl {
  float: left;
}

.box {
 @extend .fl
}
//输出的css为
.fl .box {
  float: left;
}

    占位符选择器%

    zoom:1是兼容IE6，7而设置的,后面的属性 IE6 IE7能识别，IE8 IE9……都不能识别；"_"后面的属性，只有IE6能识别，其他版本（IE7 8 9 更高级别）都不能识别
    %clearfix {
  *zomm: 1;//因为ie6,ie7不能用after或者before伪类
  &:after,
  &:before {
    content: ".";
    clear: both;
    display: block;
    overflow: hidden;
    font-size: 0;
    height: 0; 
  }
}
//上面百分号定义的选择器，可以在其它选择器中直接使用，
//而百分号选择器是不会被编译到最后的css中去的
.container {
    width; 100px;
    height: 100px;
    @extend %clearfix
     
}

    字符串插值#{$XXX},这和es6的字符串模板插值${XXX}非常相似

    {}插值符号的作用有两个

    • 一个是字符串插值
    • 另一个是避免运算
    $img: '../images/';

.content {
  background: url(#{$img}10086.jpg) left top no-repeat;
}

    SASS中属性的值可以进行运算，运算符的前后必须要有空格，否则报错

    $color: #f00;
//可以写成
$color: #f00 + 100;//rgb(255+100, 0+100, 0+100),这就是它的原理，255加任何值都为255

    {}避免运算的例子

    $size1 = 12px;
$size2 = 24px;
p {
  color: red;
  font: 12px / 24px "Microsoft YaHei"
}
//这里表示p元素会显示为12px，行高为24像素 的微软雅黑字体，
//但是当我们用变量的时候
p {
  color: red;
  font: $size1 / $size2 "Microsoft YaHei"
}
//输出结果是
p {
color: red;
font: 0.5 "Microsoft YaHei";
}
//这里的0.5显然不是我们想要的，可以用插值符号#{}避免运算
p {
  color: red;
  font: #{$size1} / #{$size2} "Microsoft YaHei"
}

    for 、while、each循环

    • @for $i from 1 through 10
    • @for $i from 1 to 10 这两个for之间唯一 的区别是through可以取到10，而to的语句只能取到9
    @for $i from  1 through 10 {
   .item#{$i}{
       width: 10px * $i
    }
}
//输出为
.item1 {width: 10px;}
.item2 {width: 20px;}
...

.item10 {width: 100px;}

    while 循环

    $a: 5;
@while($a<20) {
    .item#{$a} {
      width: 20px *　$a;
    }
    $a: $a+1;
}

    @each

    $icon_name: user, pass, checked,select;
@each $i in $icon_name {
  .icon_#{$i} {
  width: 10px;
  }
}
//输出为
.icon_user { width: 10px; }
.icon_pass { width: 10px; }
.icon_checked { width: 10px; }
.icon_select { width: 10px; }
    sass
    Heyson
    46 声望2 粉丝
    « 上一篇
    html-webpack-plugin插件【用法总结】
    下一篇 »
    原生JS实现document.ready以及和window.onload的先后顺序

    引用和评论

    推荐阅读
    头像
    计算机网络模型到底是七层？五层？四层？

    Heyson赞 1阅读 8.7k

    头像
    Sass变量：如何使用变量提升CSS的可维护性

    用户bPdeG32阅读 120

    头像
    Ant Design（Antd）深入剖析：定制主题的实现与应用

    用户bPdeUmS阅读 79

    0 条评论
    得票最新