前端

常见的CSS预处理器之Sass初体验

2019-06-17  本文已影响4人  前白

Sass

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。

Sass是一个将脚本解析成CSS的脚本语言，即SassScript，它包括两套语法。最开始的语法叫“缩进语法”，使用缩进来区分代码块并且用回车将不同规则隔开；而较新的语法叫做“SCSS”，使用CSS一样的语法块也就是大括号将不同规则分开，用分号将具体样式分开。通常情况下这两套语法是通过.sass 和 .scss 两个文件扩展名来区分的。

对于Sass的基本使用，我们需要从嵌套、变量、函数、继承和高阶属性这几方面来一一了解。

1 环境的布置

2 Sass 和 SCSS

具体语法上面的差异

SCSS语法：

$width: 100%;
$height: 100px;
$color: red;
.container{
 width: $width;
 height: $height;
 background-color: $color;
 margin-bottom: 5px;
}
.container2{
 width: $width;
 height: $height;
 background-color: $color;
 margin-bottom: 5px;
}
.container3{
 width: $width;
 height: $height;
 background-color: $color;
 margin-bottom: 5px;
}

Sass 语法：

!primary-color= hotpink
=border-radius(!radius)
 -webkit-border-radius= !radius
 -moz-border-radius= !radius
 border-radius= !radius
.my-element
 color= !primary-color
 width= 100%
 overflow= hidden
.my-other-element
 +border-radius(5px)

3 编译 .scss 文件

sass main.scss main.css

Sass 编译语法和 Less编译语法有一定的相似性；不同的是Sass实际上是支持编译风格的以及文件侦听。

我们加上一个 -- style 的属性就可以指定编译风格，它的编译风格一共有四种：

sass --style compressed main.sass main.css

文件侦听的意思就是说我们监听的某一个文件它有变动的时候，然后我们在保存的时候会自动把它编译成对应的css。

监听文件
sass --watch main.scss:main.css
监听文件夹
sass --watch xxxx/sass:xxxxx/xxxxx

4 Sass基本语法

Sass嵌套
.container {
 padding: 0;
 .header {
   background-color: red;
 }
}

 #header {
  &:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
  }
 }

Sass的嵌套相较于Less有一个不同的地方在于，在伪类中可以实现一个属性的嵌套，比如在Sass中下面样式：

p {
 border: {
 color: red;
 }
}
在css中编译出来的是：
p{
 border-color:red;
}
Sass 变量

sass的变量与less比较有一定的不同，在less中是以@ 符号开头的，而在sass中则是$ 美元符号，其他部分没有区别。

$width: 100%;
$height: 100px;
$color: blue;
$direction: left;
.border {
 border-#{$direction}: solid 5px;
}
Sass 函数

在sass中函数要加上一个@function

@function double($x, $y, $z) {
 @return $x * $y * $z;
}
#header{
 width: double(5, 5, 5px);
}
​
编译成css：
#header{
 width:125px;
}

内置函数

    .header {
     width: index(1px solid red, 1px);
    }
    ​
    编译成css：
    .header{
     width:1px;
    }

    mix (color, color, ratio);
Sass 注释
// 普通注释
// 只在源文件出现，编译之后就不存在了
​
/*
*　注释
*  compressed的style的css中没有
*/
​
/*！
*　重要注释
*  任何style的css文件中都会有，即使编译混淆，注释仍然存在
*/
Sass 计算属性
body {
　　margin: (14px/2);
　　top: 50px + 100px;
　　right: $var * 10%;
}
Sass 继承
    .header {
     border: 1px solid #ddd;
    }
    .body {
     @extend .header;
    }
    ​
    编译后的css：
    .header,body{
     border:1px solid #ddd;
    }

    @mixin common {
     background-color: red;
    }
    .header{
     font-size: 16px;
     @include common;
    }
    编译后的css：
    .header{
     font-size:16px;
     background-color:red;
    }

我们也可以向JS更进一步，把mixin写成一个函数，再加一个默认值：

    @mixin default($x, $y, $z: 12px){
     margin-left: $x;
     margin-right: $y;
     margin-top: $z;
    }
    .header {
     @include default(5px, 5px);
    }
    ​
    编译后的css：
    .header {
     margin-left: 5px;
     margin-right: 5px;
     margin-top: 12px; 
    }
Sass 引入

Sass的引入和Less是一样的，都是加上一个@import “.scss文件名”。

进阶属性
   .header {
     @if 10 == 10 { color: red; }
     @if 10 < 20 { color: red; }
    }

    .header {
     @if 10 == 11 { color: red; }
     @else  { color: green; }
    }

1 @for $index 变量从一到一百，把1.jpg到100.jpg生成100个不同的背景颜色：
    @for $index from 1 to 100 {
     .background-#{$index} {
     background-image: url("/image/#{$index}.jpg");
     }
    }
2 while 打印四个数，定义了一个变量为20px，依次4次输出结果：
    $types: 4;
    $type-width: 20px;
    @while $types > 0 {
     .while-#{$types}{
     width: $type-width + $types;
    }
     $types: $types - 1;
    }

3 each 遍历三种颜色：
    @each $item in red, green, yellow {
     .#{$item} {
     color: $item;
     }
    }
Sass 优势和劣势

优点：

缺点：

上一篇 下一篇

猜你喜欢

热点阅读