30分钟SASS教程
来源:互联网 发布:标准c语言void main 编辑:程序博客网 时间:2024/06/06 07:51
SASS教程
SASS的概念
SASS: SASS 是一种 CSS 的开发工具,提供了许多便利的写法,使得 CSS 的开发,变得简单和可维护。
SASS文件:普通的文本文件,里面可以直接使用 CSS 语法。文件后缀名是.sass
在线编译 SASS 网址:https://www.sassmeister.com/
SASS语法
SASS 语法主要有变量、嵌套CSS、导入SASS文件、混合器、继承这几部分。
变量
SASS 为 CSS 引入了变量,使用 $ 符号来标识变量,通过变量名来引用,而无需重复书写。
Sass代码:
//变量声明$highlight-color: #F90;.a:hover{ border: 1px solid $highlight-color;}
编译后:
.a:hover { border: 1px solid #F90;}
要点:
SASS 中的 {…} 块具有作用域,括号内声明的变量不能被括号外引用
SASS 是按顺序编译,所以在变量使用前要先声明
在声明变量时,变量值也可以引用其他变量(层层引用)
SASS 的变量名与 CSS 中的属性名和选择器名称相同,包括中划线和下划线。
嵌套CSS
CSS 中重复写选择器是非常麻烦
#content aside { background-color: #EEE }#content article a { color: blue }#content article a:hover { color: red }#content article h1,#content article h2 { color: #333 }
SASS 可以让你只写一遍,在规则块中嵌套规则块。
SASS代码:
#content { aside { background-color: #EEE } article { a { color: blue; &:hover { color: red } } h1,h2 { color: #333 } }}
编译后:
#content aside { background-color: #EEE;}#content article a { color: blue;}#content article a:hover { color: red;}#content article h1, #content article h2 { color: #333;}
要点:
SASS 在转换成 CSS 时,会把{…}里边的嵌套规则块一个个打开。如上例子,把#content(父级)这个id放到article选择器(子级)和aside选择器(子级)的前边
SASS 在解开一个嵌套规则时就会把父选择器(#content)通过一个空格连接到子选择器的前边。如果你想把规则应用到自身,而后代选择器的方式无法帮你实现。
如 a:hover 而不是 a(空格):hover
这时,你可以使用父选择器的标识符 & ,当包含父选择器标识符的嵌套规则被打开时,它不会像后代选择器那样进行拼接,而是 & 被父选择器直接替换,如上例子的a
使用逗号分隔两个选择元素,会组成群组选择器,群组选择器的规则会对命中群组中任何一个选择器的元素生效
如上 article{ h1,h2 { color: #333 }},解析后变成 article h1,#content article h2 { color: #333 }
子组合选择器和同层组合选择器:>、+和~
跟 jQ 的选择器类似,
子组合选择器 > ,选择一个元素的直接子元素,
同层相邻组合选择器 + ,选择元素后紧跟的元素,
同层全体组合选择器 ~ ,选择所有跟在元素后的同层元素,不管它们之间隔了多少其他元素
导入SASS文件
CSS 的 @import 规则:允许在一个css文件中导入其他css文件,只有执行到@import时,浏览器才会去下载其他css文件
SASS 的 @import 规则:生成css文件时就把相关文件导入进来
要点:
SASS 可以导入 .css .sass .scss 文件结尾的文件(其中 .sass .scss文件后缀可省略)
@import “color”; // color.sass
@import “mixins”; // mixins.scss
@import “index.css” // index.cssSASS 局部文件的文件名以下划线开头,这样, SASS 就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入。
SASS代码:
(1)//文件index.scss@import "_night-mode";...(2)//文件test.scss@import "night-mode";
编译:
(1)//文件index.css...(2)//文件test.css...//文件night-mode.css...
3.标签 !default 可以定制修改引入的 SASS 库文件中的某些值
//如果变量 $width 被声明赋值了,那就用它声明的值,否则就用这个默认值 400px$width: 400px !default;
4.SASS 允许嵌套导入,被导入的局部文件中定义的所有变量和混合器,也会在这个规则范围内生效(相当于有了作用域)。
混合器
由于大段大段的重用样式的代码,独立的变量就没办法应付,可以通过 SASS 的混合器 @mixin 和 @include 实现大段样式的重用。
SASS代码:
@mixin no-bullets($normal, $hover, $visited) { list-style: none; li { list-style-image: none; } color: $normal; &:hover { color: $hover; } &:visited { color: $visited; }}ul.plain { color: #444; @include no-bullets(blue, red, green);}
编译:
ul.plain { color: #444; list-style: none; color: blue;}ul.plain li { list-style-image: none;}ul.plain:hover { color: red;}ul.plain:visited { color: green;}
要点:
1.混合器是展示性的描述,所以名字应该是是一种展示性的描述
2.混合器可以包含 CSS 规则,包含选择器和选择器中的属性,
如上 ul.plain li
3.可以通过在 @include 混合器时给混合器传参,来定制混合器生成的精确样式,如上 @include no-bullets(blue, red, green);
混合器传参数还有更多用法,这里不细讲
继承
当一个元素拥有的类表明它属于另一个类的子集,这时可以使用继承。
SASS 代码:
.one { width:100px; height:100px; } .two { /*继承的样式*/ @extend .one; /*独立的样式*/ background:red; border:5px solid #000; }
编译后:
.one, .two { width: 100px; height: 100px;}.two { background: red; border: 5px solid #000;}
继承(Extend)将想要继承的选择器(如“.two”)和其引用的选择器(如“.one”)组成群组选择器中间用逗号隔开,组成群组选择器。
要点:
1.要继承的不仅仅是一个类名,可以是一个id也可以是一个元素,也可以是某个状态,大部分任何选择器都能继承(包含选择器(.one .two)或者相邻兄弟选择器(.one+.two)目前还是不支持继承)。
.hoverlink { @extend a:hover; } a:hover { text-decoration: underline; }
2.可以使用“,”继承多个选择器的样式
.one { width:100px;height:100px; } .two { /*继承的样式*/ @extend .one, .three; /*独立的样式*/ background:red; border:5px solid #000; } .three { padding:10px; }
3.可以链型继承, .one 继承 .two , .two 继承 .three
- 30分钟SASS教程
- Sass教程
- sass十分钟入门
- 30分钟LINQ教程
- 30分钟LINQ教程
- 30分钟LINQ教程
- 30分钟LINQ教程
- 30分钟LINQ教程
- 30分钟LINQ教程
- 30分钟linq教程
- 30分钟LINQ教程
- 30分钟LINQ教程
- 30分钟LINQ教程
- 30分钟LINQ教程
- 30分钟LINQ教程
- 30分钟LINQ教程
- 30分钟LINQ教程
- 30分钟LINQ教程
- java 字符串 Split切割 特殊字符(例:* ^ : | )注意点
- 哥德巴赫猜想验证(100以内)-C语言
- json字符串的理解
- 【安全牛学习笔记】SQLMAP自动注入-INHECTION、DETECTION、TECHNIQUES
- Java使用jdbc连接MySql数据库,实现增删改查
- 30分钟SASS教程
- tf_spark:Run MNIST example
- Echarts使用
- linux命令vim命令与nginx操作
- php写爬虫
- 代码:小波包分解与重构、小波包能量特征提取
- 微服务架构的基础框架选择:Spring Cloud还是Dubbo?
- docker开发笔记
- 前后端语言以及服务器的简介