scss入门学习(一)

sass的文件后缀名

sass是目前流行的css预处理语言。sass有两种后缀文件,一种是.sass,不允许使用大括号和分号;另一种是.SCSS,允许使用大括号和分号,类似于我们平时写css的语法习惯。其实sass最早出现在2007年,但却没有后来的LESS流行和易于接受,最主要的原因是sass严格的语法要求不太符合csser编写,sass为了改变这种现状,迎合大众,推出了更为宽松的SCSS这种类css写法。

sass文件的编译

sass扩展了css的写法,为css提供了变量,继承,宏等能够提高效率和增强维护性的新概念。是不是说我们直接就可以在html文件中引用.sass文件了么?答案是否定的,浏览器并不会认识sass语法形式,而只会解析.css文件资源,所以我们需要将sass编译成css。

主要有以下几种编译方式:

命令编译

单文件编译:

1
sass <要编译的sass文件路径>/style.scss:<要输出的css文件路径>/style.css

多文件编译:

1
sass sass/:css/

实时监听文件更改

1
sass --watch <要编译的sass文件路径>/style.scss:<要输出的css文件路径>/style.css

GUI界面工具编译

Koalo
CodeKit

自动化编译

自动化编译因你使用的工具的不同而不同。当前流行的有gulp,grunt,webpack等。

不同样式风格的css输出方法

嵌套输出方式(nested)

1
sass test.scss:test.css --style nested

展开输出方式(expanded)

1
sass test.scss:test.css --style expanded

紧凑输出方式(compact)

1
sass test.scss:test.css --style compact

压缩输出方式(compressed)

1
sass test.scss:test.css --style compressed

变量

声明变量

— 1.变量声明符号($)
— 2.变量名称
— 3.赋予变量的值

1
$width: 100px;

普通变量和默认变量

在普通变量后加上关键字!default即可声明默认变量.默认变量的价值再进行组件化开发的时候非常有用。

1
$width: 100px !default;

局部变量和全局变量

在选择器,函数,混合宏…外面声明的变量为全局变量。相应的在块内部声明的变量为局部变量。局部变量在块内会覆盖全局变量。

1
2
3
4
5
6
7
8
$color: orange !default; //全局变量
.a{
$color: red; // 全局变量
color: $color; // color: red< 大专栏  scss入门学习(一)br/>}
.b{
color: $color; // color: orange
}

变量的调用

1
2
3
4
$width: 100px !default;
.container{
width: $width;
}

混合宏(mixin)

当你的网站中有几处样式类似,比如颜色,字体时用变量就可以统一处理了;但是当你有大段的样式需要复用时,变量就无法达到目的了。而混合宏就变得很有意义了。

声明混合宏

— 混合宏声明符号(@mixin)
— 混合宏名称
— (可重用的)代码片段

  1. 不带参数的混合宏

    1
    2
    3
    4
    @mixin border-radius {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }
  2. 带参数的混合宏

    1
    2
    3
    4
    @mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
    }
  3. 复杂的混合宏

    1
    2
    3
    4
    5
    6
    7
    8
    @mixin box-shadow($shadow...){
    @if length($shadow)>=1{
    @include prefixer(box-shadow,$shadow)
    }
    } @else{
    $shadow: 0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow)
    }

调用混合宏

— 混合宏调用的关键字@include
— 混合宏的名称

继承/扩展

当两个样式有高度可重用代码时,我们可以定义一个基类,将相似度高的代码提取出来,然后子类继承(extend)父类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 定义一个基类 -->
.btn{
border: 1px solid
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn; // 继承
}

.btn-second {
background-color: orange;
color: #fff;
@extend .btn; // 继承
}

占位符%placeholder

当定义一个基类的时候,如果没有子类继承他(extend),就会造成代码冗余。我们使用占位符声明的代码,如果不被@extend调用的话,将不会产生任何代码。

1
2
3
%mt5{
margin-top: 5px; //如果没有子类继承,代码中不会显示
}

优先使用占位符;如果需要传参数,使用宏;没有参数,使用继承。

上一篇:解决Sublime Text 3 安装Vue syntax highlight后scss无法高亮问题


下一篇:sass和scss的主要区别