Sass快速上手(看完即会)

目录

一、Sass变量

二、数据类型

三、Sass插值

四、Sass嵌套

1.选择器嵌套

2.父类选择器 & 

3.属性嵌套

五、注释

六、运算（一般是加、减、乘、除）

七、代码复用

1.继承：@extend

2.占位符：%placeholder

3.混合宏：@mixin

总结：

对比：

 1.继承与混合宏

2.“继承@extend”和“占位符%placeholder”

八、流程控制

1.@if语句

2.@for循环

3.@while循环

4.@each循环

九、用户自定义函数

十、导入import

---

 

一、Sass变量

主要包括三部分：声明符$，变量名，值

// 变量取值一般有两种方式：
$width:10px;	//定义变量的一般值
$width:10px !default;	//定义变量的默认值

二、数据类型

1. 数字型：10、10px、10%等；
2. 字符型：如"微软雅黑"、sans-serif等；
3. 布尔型：如true、false；
4. 颜色型：，如#FF00FF、RGB(255,0,255)、hsl(360,50%,50%)；
5. 列表型：如“10px 20px 30px 40px”（空格隔开）或“YaHei,Arial,Helvetica,sans-serif”（逗号隔开）；
6. Map型：简单了解即可；
7. 空型：null；

三、Sass插值

可以通过使用插值的方式来实现在“选择器名”、“属性名”以及“属性值”中插入一个“变量的值”，
从而来“构造”一个新的选择器名、新的属性名以及新的属性值。

语法：#{变量}

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

四、Sass嵌套

1.选择器嵌套

.sass文件

.container{
    width: 1200px;
    margin: 0 auto;
    .header{
        height: 90px;
        line-height: 90px;
        .logo{
            width: 100px;
            height: 60px;
        }
    }
    .center{
        height: 600px;
        background-color: #F00;
    }
    .footer{
        font-size: 16px;
        text-align: center;
    }
}

对应的.css文件

.container{
    width: 1200px;
    margin: 0 auto;
}

.container .header{
    height: 90px;
    line-height: 90px;
}

.container .header .logo{
    width: 100px;
    height: 60px;
}

.container .center{
    height: 600px;
    background-color: #F00;
}
.container .footer{
    font-size: 16px;
    text-align: center;
}

2.父类选择器 & 

.sass文件

.container{
    width: 1200px;
    margin: 0 auto;
    a{
        color: #333;
        // &代表父
        &:hover{
            text-decoration: underline;
            color: #F00;
        }
    }
    .top{
        border: 1px solid red;
        // &代表父
        &-left{
            float: left;
            width: 200px;
        }
    }
}

对应的.css文件

.container{
    width: 1200px;
    margin: 0 auto;
}

.container a{
    color: #333;
}

.container a:hover{
    text-decoration: underline;
    color: #F00;
}

.container .top{
    border: 1px solid red;
}
.container .top-left{
    float: left;
    width: 200px;
}

3.属性嵌套

.sass文件

.container {
    a{
        color: #333;
        font: {
            size: 14px;
            family: Arial, Helvetica, sans-serif;
            weight: bold;
        }
    }
}

对应的.css文件

.container a{
    color: #333;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

五、注释

1./*hhh*/
2.// hhh
3./*！一般用于css文件顶部声明版权信息*/

六、运算（一般是加、减、乘、除）

注意点：

• 加、减：数值可以带单位，但是运算单位必须相同
• 乘：只能一个带单位，另一个不能带单位
• 除：由于"/"已经作为一种符号来使用了，所以要在外面添加一个小括号()

例子：

content:"Welcome to"+1vyestudy; = content:"Welcome to 1vyestudy"
color:(#010203+#040506); = color:#050709;

七、代码复用

1. 继承：@extend
2. 占位符：%placeholder
3. 混合宏：@mixin

1.继承：@extend

.sass文件

.spriteAll{
    bakckground:url(images/sprite.png) no-repeat;
}
.sprite-1{
    @extend .spriteAll;
    background-position:0 -30px;
}
.sprite-2{
    @extend .spriteAll;
    background-position:0 -60px;
}

对应的.css文件

.spriteAll, .sprite-1, .sprite-2{
    bakckground: url(images/sprite.png) no-repeat;
}
.sprite-1{
    background-position: 0 -30px;
}
.sprite-2{
    background-position: 0 -60px;
}

2.占位符：%placeholder

.sass文件

%btn{
    padding:6px 10px;
    border:1px solid silver;
    font-size:14px;
}
.btn-primary{
    @extend %btn;
    color:white;
    background-color:red;
}
.btn-second{
    @extend %btn;
    color:orange;
    background-color:green;
}

对应的.css文件

.btn-primary, .btn-second{
    padding: 6px 10px;
    border: 1px solid silver;
    font-size: 14px;
}
.btn-primary{
    color: white;
    background-color: red;
}
.btn-second{
    color: orange;
    background-color: green;
}

3.混合宏：@mixin

.sass文件

@mixin center($width,$height){
    width: $width;
    height: $height;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -($height) / 2;
    margin-left: -($width) / 2;
}
div{
    @include center(100px,80px);
}

对应的.css文件

div{
    width: 100px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -50px;
}

总结：

方法	声明方式	调用方式
继承	.class	@extend
占位符	%placeholder	@extentd
混合宏	@mixin	@include

对比：

 1.继承与混合宏

1. 继承和混合宏都能实现相同代码块的重用，极大提高开发效率；
2. 继承的使用一般不存在代码冗余，而混合宏的使用会存在代码冗余；
3. 继承不可以传递参数，而混合宏可以传递参数；

2.“继承@extend”和“占位符%placeholder”

1. 需要保留基类的：只使用@extend来实现；
2. 不需要保留基类的：使用@extend配合%placeholder来实现；

八、流程控制

1.@if语句

@if…（单向选择）；
@if…@else…（双向选择）；
@if…@else if…（多向选择）；

2.@for循环

@for $i from 开始值 through 结束值
@for $i from 开始值 to 结束值

3.@while循环

@while(判断条件){
    执行语句;
}

4.@each循环

@each $var in 列表值{
    ……
}

九、用户自定义函数

语法：@function name($param1,$param2,...){}

例子：

$index: 6;
@function get-color($key) {
	@if $key > 5 {
		@return #000;
	} @else {
		@return #fff;
	}
}
body {
	background: get-color($index);
}
######

// 生成的css代码
body {
  background: #000;
}

十、导入import

如果一个页面需要使用其他页面的样式，sass可以导入其他的scss文件，scss会把他们编译成一个css文件。这样在开发中可以把一个页面的样式分割成多个scss文件，然后在页面的scss文件中导入其他scss，可以实现css的模块化开发。

// 这里假设同级目录下有一个box1.scss
div {
	width: 200px;
}
// 在box2.scss文件里引入box1.scss
@import "box1"
--------------------------------------

// 生成的css代码
div {
	width: 200px;
}