今天，我们来深入详细带实例地讲一下css预处理器--SASS
- sass编译器 在线+软件
- 重点拎一拎 -- 特好使的自动编译器软件 Koala
- 变量使用
- 父子级标签嵌套
- 继承 @extend
- 导包 @import
- mixins
- @media媒体查询结合mixin
- 操作符
- sass社区
- 流行的sass框架
sass
官网
超赞sass社区: thesassway
一、编译器
1.在线编译器： SassMeister
SassMeister
2.在线 CodePen
CodePen
3.软件自动编译器 Koala
标志性logo真的很可爱
image
项目拖进去
使用Koala有几大好处...
- 自动编译：将项目拖到界面中第一次编译后，本地项目里自动生成css文件，实时更新，所以你只需要放心大胆写你的scss，在html文件里引入它对应的css文件就OK啦
- 语法错误提示：编译的时候本身就会去检测，语法错误肯定报错提示，在右下角弹出红框框
- 多语言都支持：不仅仅是Sass,还有Less，CoffeeScript都能编译
- 嗯！免费！这才是重点....
二、变量引入(variables)：
1.png
- 变量赋值直接引用
$commonColor:red; //这里赋变量
.nav{
color:$commonColor; //后续都可以直接用变量
}
三、嵌套(nesting):
- 自己就不需要打那么多父级标签来限制；
- 在tab切换引发样式，背景图等改变起来方便得多
2.png
.site-header nav {
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
float: left;
}
} //一直可以父元素套子元素
- 这个在我做移动端开发不同tab栏切换图标背景简直完美！
tab切换
继承
- 例子：类.btn-b和类.btn-a样式一样，
4.png
.btn-a{
啦啦啦，这是我的各种样式
}
.btn-b{
@extend .btn-a; // 听btn-a的话，没毛病，100分！
啦啦啦，后续继续写自己的样式；
}
- 例2：
.group:before, .group:after {
content: "";
display: table;
}
6.png
五、引入@import
-
单独将某一块scss拎出来作为小模块，该用的时候就@import引进来
-
按照习惯，给这个外部的scss文件命名前面加下划线_：
8.png
- 需要的时候就@import：
9.png
六、强大的Mixins
- 例子：为了设置一个渐变，我们不得不将所有可能的浏览器适配的代码都写上去，仅仅为了一个效果，后期想修改也需要，复用性也低
10.png
-
解决方案：
12.png
$borderColor:#ec7785; //变量
.btn-a {
display: inline-block;
padding:15px;
margin-right: 10px;
border:1px solid $borderColor;
}
//这是你用mixin包装好的verticalGradient方法，传入参数变量
@mixin verticalGradient($fromColor,$toColor) {
background-image: linear-gradient(to bottom, $fromColor, $toColor);
}
.btn-b{
@extend .btn-a; //继承
border-radius:5px 5px;
@include verticalGradient(blue,red); //引入mixin的方法，传入你想要的颜色值
}
11.png
-
sass开心易理解，我们也开心，少写代码咯~
-
我们也可以把这个mixin代码提取出来放到单独的文件里：_mixins.scss；需要的文件就
@import 'mixins' //文件名导入
- 眼不见，心不烦，哇，代码又少啦；(不然呢，你看bootstrap4怎么辣么多下划线开头的scss文件)
七、@media结合mixins
/* Media Query Mixins*/
@mixin sm-width { //定好的两个mixin，小屏幕和中等屏幕的media query媒体查询
@media only screen and (max-width: 400px) {
@content; //没啥特殊意义，就指你引入这个mixin后，这地儿是你的地盘，可以自由写样式
}
}
@mixin ml-width {
@media only screen and (min-width: 1100px) {
@content;
}
}
- 需要的时候@include 这在自适应的时候特别方便，
li {
list-style: none;
float: left;
margin-right:10px;
@include sm-width { //小屏幕时一行一个li
float: none;
margin-right: 0;
margin-bottom: 2px;
}
@include ml-width { //中大屏幕时每个li有5px右边距
margin-right:5px;
}
}
屏幕适配
- 例2：根据屏幕宽度调整页面字体大小：
html {
font-size: 1em;
@include sm-width {
font-size: .8em;
}
@include ml-width {
font-size: 1.4em;
}
}
八、支持操作符
- 运算操作符：
| 运算操作符 | 简介 |
|---|---|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 取余 |
.box {
width:100px + 200px; //可识别，一共300px
}
- 逻辑操作
- 一些命令指令，表达式
- 等等...
- 这个博主写的不错，推一下啦,可惜没有广告费~
流行的Sass框架和社区,大佬们时常更新耐心解答
哇咔咔，小仙女想去逛街
-
不容易啊小仙女，忍住逛街的诱惑码字，
嗯。一定是学习使我快乐
学习与思考使我保持清醒
网友评论