A今天学了什么

1.配置安装sass

下载sass:
https://rubyinstaller.org/downloads/下载Ruby，安装成功后，在cmd输入ruby -v 查询是否安装成功，之后再在cmd中输入 gem install sass, 下载完成后 ，再输入 sass -v查询是否安装成功

配置编译环境：
在HBulider中 ，工具——预编译器设置——选择.sass,.scss 编辑——选择安装地址——命令参数填：--sourcemap=none %FileName% %FileBaseName%.css    如下图所示 点击确定 配置完成。

QQ图片20180307105350.jpg

2.scss 的语法

定义变量：
$变量名 ： 属性；
$a:red;

在元素中定义表达式需要加入#{$a}
margin-#{$a}:red;

计算功能：
body{
margin-top:10px + 20px;
}

嵌套：
div{
p{
}
}
=
div p {
}

代码继承
div{}
p{
@extend div
}

Mixin可以重用的代码  相当于共同样式
@Mixin left{
float:left;
}
p{
@include left;
}
可以设置参数
@Mixin left($a 10px){
float:left;
width:$a;
}
p{
@include left(20px);
}

插入文件：
@import url "文件路径"

.3拓展选择器

il:first-child{} 选择第一个li元素
li:nth-child(a){}  a为li的顺序 选择第a个li
li:nth-child(even) 偶数选择器
li:nth-child（odd）奇数选择器
li:nth-child(4n+1) 表达式选择器
li:not(:nth-child(a)):  除了第a个元素都.....

B今天学会了什么

1.配置安装sass

下载sass:
https://rubyinstaller.org/downloads/下载Ruby，安装成功后，在cmd输入ruby -v 查询是否安装成功，之后再在cmd中输入 gem install sass, 下载完成后 ，再输入 sass -v查询是否安装成功

配置编译环境：
在HBulider中 ，工具——预编译器设置——选择.sass,.scss 编辑——选择安装地址——命令参数填：--sourcemap=none %FileName% %FileBaseName%.css    如下图所示 点击确定 配置完成。

QQ图片20180307105350.jpg

2.scss 的语法

定义变量：
$变量名 ： 属性；
$a:red;

在元素中定义表达式需要加入#{$a}
margin-#{$a}:red;

计算功能：
body{
margin-top:10px + 20px;
}

嵌套：
div{
p{
}
}
=
div p {
}

代码继承
div{}
p{
@extend div
}

Mixin可以重用的代码  相当于共同样式
@Mixin left{
float:left;
}
p{
@include left;
}
可以设置参数
@Mixin left($a 10px){
float:left;
width:$a;
}
p{
@include left(20px);
}

插入文件：
@import url "文件路径"

.3拓展选择器

il:first-child{} 选择第一个li元素
li:nth-child(a){}  a为li的顺序 选择第a个li
li:nth-child(even) 偶数选择器
li:nth-child（odd）奇数选择器
li:nth-child(4n+1) 表达式选择器
li:not(:nth-child(a)):  除了第a个元素都.....