Sass学习第一天

Sass学习

网站学习地址：

Sass中文网：https://www.sass.hk/docs/#t7-3

Airen的博客：https://www.w3cplus.com/preprocessor/understanding-sass-list.html

Whqet前端开发的博客：https://www.cnblogs.com/whqet/p/Sassmap.html

绿叶学习网：http://www.lvyestudy.com/sass/sass_list.aspx

Sass 嵌套规则

Sass

.box{

Color:red;

.box1{

Font-size:15px;

}

}

Css

.box{

Color:red;

}

.box .box1{ //变成后代选择器

Font-size:15px;

}

父选择器&

Sass

.box{

Color:red;

&：hover{

Font-size:15px;

}

}

Css

.box{

Color:red;

}

.box:hover{ //变成父元素的hover效果

Font-size:15px;

}

属性嵌套

Sass

.box{

Color:red;

Font:{

Size:15px;

Weight:blod;

}

}

Css

.box{

Color:red;

Font-size:15px;

Font-weight:blod;

}

注释

Sass中的//注释编译在css中不存在，/**/注释编译在css中是存在的。

#{$bl} —— 可以在注释中解析出变量

$bl:“变量”;

Eg:/* 我是 #{$bl}*/  =>/*我是变量*/

变量

写法：$a:”我是变量”;$相当于js中的var

使用：

$a:10px;

.box{

Font:{

Size:$a;

}

}

结果：

.box{

Font-size:10px;

}

用途：当一个数使用的地方很广时，可以设为变量

数据类型

字符串

$a:”我是有引号的字符串”;

$b:blod;

Mixin

相当于js中的function

@mixin cs1($selector){//声明

body #{$selector}:before{

content:"hi";

}

}

@include cs1(".box1");//使用

用途：当一个方法很多地方都需要时，可以用这个创建

Eg:

平时清除浮动时的

.box:after{

Content:””;

Display:table;

Clear:both;

}

可以改为

@mixin float-after($selector){

#{$selector}:after{

Content:””;

Display:table;

Clear:both;

}

}

@include float-after(“.box”);

数组（列表）

写法：$list:(1,2,3);  $list:(1 2 3);  $list:1,2,3; $list:1 2 3 ; $list:((a,b,c),(d,e,f));

获取：

Nth($list,1)//选取list中索引为1的数（1）

Length($list)//得到list的个数

append($list,”添加一个数”)

用途：可以用于写多个值进行选取

Eg:

$list:(

(0 0 10px 20px),

(2px 1px)

)

.box{

Margin:nth($list,1);

}

Map值(object)

写法：

$obj:(

A:”你”,

B:”好”

)

获取方式：具体看https://www.cnblogs.com/whqet/p/Sassmap.html

Eg:

$obj(

Default:(

Font-size:10px;

Color:#fff;

),

one:{

Font-size:20px;

Color:#000;

}

)

运算

+ - * /

/加号可以做加法运算，也可以直接加上单位

//乘法不能带着符号相乘，只能有一边有符号

//带着符号相除后得到的结果要加上符号，或者用带符号的除以不带符号的

颜色的运算

Eg:

P{

Color:#666+#111;

}

//rgba之间运算透明度必须为一样,不一样以前面的为准。

Eg:

p{

Background:rgba(2,2,2,0.6) + rgba(3,3,5,0.6);

}

插值语句

#{$bl}

就是将一个变量插在一个地方去

Eg:

$bl:a;

P #{$bl}{

Color:red;

}

得到：

P a {

Color:red;

}

控制语句

@if @else

@if 1>5{

Color:red;

}

//如果1大于5为真，color就为red；

@mixin pd(bool){

@if bool{

Color:red

}@else{

Color:blue;}

}

@include pd(false);

得到：color:blue;

文件导入@import

@import可以将sass、css的外部文件导入到内部来，也可以导入在局部中去。

Eg:@import demo1.scss”

循环语句@for

@for逻辑和js中的for循环差不多

$list:a b c;

写法：

$list:aaa bbb ccc;

@for $i from 1 through 3 {

#{nth($list,$i)}{

color:red;

}

}

$i：相当于for(var i=0;i<10;i++)中的i

1为初始值，3为结束值

结果：

aaa {

color: red; }

bbb {

color: red; }

ccc {

color: red; }