css预处理器及sass

css预处理器

CSS预处理器定义了一种新的语言，用一种专门的编程语言，减少枯燥无味的CSS代码的编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。

sass安装

安装Ruby:
rubyinstaller-devkit-2.5.3-1-x64.exe
输入如下命令
ruby -v
安装成功会打印如下信息：
ruby 2.5.3p105 (2018-10-18 revision 65156) [x64-mingw32]
gem install sass
sass -v

sass使用

.scss文件转化的css代码
sass input.scss:output.css
监视单个 sass 文件，每次修改并保存时自动编译：
sass --watch input.scss:output.css

sass编译风格

nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。
生产环境中一般使用最后一种风格：
sass --style compressed test.scss:test.css
sass --watch --style compressed test.scss:test.css

sass语法

scss基本语法使用：

//引入公共的scss文件
@import "base.scss";
//1. $用于定义变量
$width: 100px;
$red: red;
$left: left;
div {
    width: $width;
    background-color: $red;
    //2. 变量拼接: #{变量}
    margin-#{$left}: 100px;
}
//3. sass语法支持嵌套形式
#box {
    width: 100px;
    a {
        color: red;
        //4. &代表父级
        &:hover {
            color: red;
        }
    }
}
.alert {
    width: 10px;
    height: 100px;
    a {
        display: block;
        width: 30px;
    }
}
.box {
    //5. @extend  继承
    @extend .alert;
}
//6.混合宏：当需要写一些重复代码时，可以把代码放在混合宏中
@mixin box-shadow {
    box-shadow: 3px 3px 3px 3px;
    -webkit-box-shadow: 3px 3px 3px 3px;
    -o-box-shadow: 3px 3px 3px 3px;
    -moz-box-shadow: 3px 3px 3px 3px;
    -ms-box-shadow: 3px 3px 3px 3px;
}
span {
    @include box-shadow();
}
a {
    @include box-shadow();
}

编译后的css文件

* {
  margin: 0;
  padding: 0; }

div {
  width: 100px;
  background-color: red;
  margin-left: 100px; }

#box {
  width: 100px; }
  #box a {
    color: red; }
    #box a:hover {
      color: red; }

.alert, .box {
  width: 10px;
  height: 100px; }
  .alert a, .box a {
    display: block;
    width: 30px; }

span {
  box-shadow: 3px 3px 3px 3px;
  -webkit-box-shadow: 3px 3px 3px 3px;
  -o-box-shadow: 3px 3px 3px 3px;
  -moz-box-shadow: 3px 3px 3px 3px;
  -ms-box-shadow: 3px 3px 3px 3px; }

a {
  box-shadow: 3px 3px 3px 3px;
  -webkit-box-shadow: 3px 3px 3px 3px;
  -o-box-shadow: 3px 3px 3px 3px;
  -moz-box-shadow: 3px 3px 3px 3px;
  -ms-box-shadow: 3px 3px 3px 3px; }

/*# sourceMappingURL=test.css.map */

for循环，自定义函数

//for循环，使用to表示[1, 2)
@for $i from 1 to 2 {
    .box {
        width: $i*10px;
    }
}
//for循环，使用through表示[1, 2]
@for $i from 1 through 2 {
    .head {
        margin-left: $i * 10px;
    }
}
//自定义函数和if的使用
@function margin($parentW, $num, $childW) {
    @if($parentW > $num * $childW) {
        @return ($parentW - $num * $childW)/($num - 1);
    }@else {
        @return 0;
    }
}
//带参数的混合宏
@mixin box-shadow($a, $b, $c, $d, $color) {
    -ms-box-shadow: $a $b $c $d $color;
    box-shadow: $a $b $c $d $color;
}
ul {
    width: 350px;
    height: 80px;
    border: 2px solid blue;
    list-style: none;
    display: flex;
    padding:0;
    li {
        width: 80px;
        height: 40px;
        background: red;
        margin-right: margin(350px, 4, 80px);
        flex: 1;
        @include box-shadow(1px, 1px, 1px, 1px, red);
        &:hover {
            background: pink;
        }
        &:last-child {
            margin-right: 0;
        }
    }
}

编译后的css文件如下：

.box {
  width: 10px; }

.head {
  margin-left: 10px; }

.head {
  margin-left: 20px; }

ul {
  width: 350px;
  height: 80px;
  border: 2px solid blue;
  list-style: none;
  display: flex;
  padding: 0; }
  ul li {
    width: 80px;
    height: 40px;
    background: red;
    margin-right: 10px;
    flex: 1;
    -ms-box-shadow: 1px 1px 1px 1px red;
    box-shadow: 1px 1px 1px 1px red; }
    ul li:hover {
      background: pink; }
    ul li:last-child {
      margin-right: 0; }

/*# sourceMappingURL=test.css.map */

猜你喜欢