A我今天学习到了什么
配置webstorm的安装环境
安装后查看软件Rudy 2.4.1-1/start Command
输入sass -v
01.PNG
没有出来输入gem install sass
Y0SEMP@4TP47PL$CN%{WB7U.png
输入node -v
3V$@OH4IV%ZZ1UM@T9_~(L9.png
sass的语法
新建xxx.scss
在.scss的文件中写css的样式
变量
$bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
.header{
margin-#{$place}:20px;
}
计算功能
div {
@include bx(30px,right);
width: $dw / 2;
height: 300px + 100px;
background: $bj;
margin-#{$tp}:30px * 2 ;}
嵌套
div {
@include bx(30px,right);
width: $dw / 2;
height: 300px + 100px;
background: $bj;
margin-#{$tp}:30px * 2 ;
li:first-child {
color: red;
margin-left: 40px;
}
li:last-child{
color: aqua;
a{text-decoration: none;
text-align: center;
margin-left: 80px;
}
}
&:hover{cursor: pointer}
}
伪元数，伪类选择器
&:hover{cursor: pointer}
代码重用
继承
/SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
Mixin
//是可以重用的代码块
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
//mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
div {
@include left(20px);
}
//可以传递多个参数
@mixin wh($w:100px,$h:100px) {
width:$w;
height:$h;
}
div {
@include wh(200px,200px);
}
插入文件@import命令
@import命令，用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
@import "foo.css";
B我掌握了的
配置webstorm的安装环境
安装后查看软件Rudy 2.4.1-1/start Command
输入sass -v
01.PNG
没有出来输入gem install sass
Y0SEMP@4TP47PL$CN%{WB7U.png
输入node -v
3V$@OH4IV%ZZ1UM@T9_~(L9.png
sass的语法
新建xxx.scss
在.scss的文件中写css的样式
变量
$bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
.header{
margin-#{$place}:20px;
}
计算功能
div {
@include bx(30px,right);
width: $dw / 2;
height: 300px + 100px;
background: $bj;
margin-#{$tp}:30px * 2 ;}
嵌套
div {
@include bx(30px,right);
width: $dw / 2;
height: 300px + 100px;
background: $bj;
margin-#{$tp}:30px * 2 ;
li:first-child {
color: red;
margin-left: 40px;
}
li:last-child{
color: aqua;
a{text-decoration: none;
text-align: center;
margin-left: 80px;
}
}
&:hover{cursor: pointer}
}
伪元数，伪类选择器
&:hover{cursor: pointer}
代码重用
继承
/SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
Mixin
//是可以重用的代码块
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
//mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
div {
@include left(20px);
}
//可以传递多个参数
@mixin wh($w:100px,$h:100px) {
width:$w;
height:$h;
}
div {
@include wh(200px,200px);
}
插入文件@import命令
@import命令，用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
@import "foo.css";
C我没掌握的
没怎么去运用，不太会实现，要多练
