一、什么是Sass/Scss.
Sass和Scss是指的是同一个东西。Sass的语法更近ruby,而Scss更接近css代码。Sass/Scss是对css的扩展,但是scss/sass不能之间直接运行在浏览器中,需要编译成css.
二、在命令行中安装Sass和使用
首先需要在电脑上安装node.然后使用npm安装Sass.
npm install -g sass
常用的命令
sass main.scss main.css
sass --watch main.scss:main.css
三、Sass的语法
a、nesting(嵌套)
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
编译后:
#main p { color: #00ff00; width: 97%;
} #main p .redbox { background-color: #ff0000; color: #000000;
}
属性嵌套:
.container {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:{
direction: column;
wrap: nowrap;
}
align-items: center;
padding: 3rem 0;
box-sizing: border-box;
}
编译后:
扫描二维码关注公众号,回复:
5993015 查看本文章
.container {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
padding: 3rem 0;
box-sizing: border-box;
}
伪类选择器的嵌套:
b、Variables(变量)
变量名字需要以$符号开始。
$main-color:#521751;
.sass-introduction {
border: 0.05rem solid $main-color;
background: #fae5ff;
padding: 2rem;
text-align: center;
box-shadow: 0.2rem 0.2rem 0.1rem #ccc;
width: 90%;
box-sizing: border-box;
}
编译后:
.sass-introduction {
border: 0.05rem solid #521751;
background: #fae5ff;
padding: 2rem;
text-align: center;
box-shadow: 0.2rem 0.2rem 0.1rem #ccc;
width: 90%;
box-sizing: border-box;
}
变量表示list
$border-default:0.05rem solid $main-color;
$font-default:Arial, sans-serif;
body {
font-family: $font-default;
margin: 0;
}
.sass-introduction {
border: $border-default;
background: #fae5ff;
padding: 2rem;
text-align: center;
box-shadow: 0.2rem 0.2rem 0.1rem #ccc;
width: 90%;
box-sizing: border-box;
}
变量表示map
$colors: (main : #521751,secondary : #fa923f);
.documentation-links .documentation-link {
text-decoration: none;
color: map-get($colors,main);
display: block;
padding: 0.2rem;
}
编译后
.documentation-links .documentation-link {
text-decoration: none;
color: #521751;
display: block;
padding: 0.2rem;
}