SCSS 日常用法
本文是以自己的理解起的结构,要看详细的帮助文档,参阅这里:https://sass-lang.com/documentation/
你需要了解的
less 和 sass 是两种 css 预编译语言,就是说通过 less 或者 scss 写的代码最终都会被编译成 css 再使用。其目的是为了更快、更结构的编写 css 文件,都能使用 变量、运算符、判断、方法等等。
scss 与 sass 的区别(这里先不讲 less ):
先有的 sass 后有的 scss
scss 需要大括号{}和分号;
sass 什么都不用直接裸奔,通过缩进来区分代码等级,像 yaml 语言
初学者最好用 scss 而非 sass,sass 在你追求代码简洁的时候用,来看个对比
使用 scss 之前你需要准备的
最好用 IDEA 系统的软件(webStorm phpStorm IDEA等)开发,里面添加对于 scss 的 File Watcher 即可,在每次scss 文件改变的时候,程序都会自动编译 scss 到 css。
或者在 vue 单文件项目中直接在 <style lang='scss'></style> 中使用 scss,不过本人并不推荐直接把样式写在 vue 单文件的方式,更推荐跟 vue 分离开,更好管理,因为 scss 本身就支持拆分成多文件,再通过 mixin 整合起来。
做大型系统的时候就会体会到了。
关于如何添加 scss 支持,看这里: https://blog.csdn.net/KimBing/article/details/100532939
看个小例子
写一个 .btn 类并支持 :hover :active 样式
css
.btn {
/* btn 初始样式 */
}
.btn:hover{
/* :hover 样式 */
}
.btn:active{
/* :active 样式 */
}
scss
.btn{
// btn 初始样式
&:hover{
// hover 样式
}
&:active{
// active 样式
}
}
在 scss, sass, less 中 & 都代指父类
上面这个例子中的 & 代指 .btn
可以看出 scss 的结构要比 css 清晰,并且写的也要更少。
下面的 scss 在使用中就会生成上面的 css。
而这还只是皮毛,保证你用过 scss 之后就不会再用 css 写样式了。
变量
变量是以 $ 开头的,可以是颜色,长度,数值,等等。
像 js 的变量一样,scss 的变量也是有作用域的,也就是说内部声明的变量是无法在外面使用的,如果想让内部的变量在外部可访问,需要在变量值后面添加 !global 声明。
(还可以通过添加 !default 给变量设置默认值,这个在写一个样式库的时候比较实用,避免别人在没有给变量赋值之前使用)
$变量名: 变量值
// Colors
$red: #CD594B !global;
$yellow: #F8CE5E;
$green: #4B9E65;
$yellow: #5A8DEE;
// Unites
$btn-padding: 4px;
$btn-lineheight: 26px;
实际使用中:
scss
.btn-success {
background-color: $green;
line-height: $btn-lineheight;
color: #fff;
}
生成 css
.btn-success {
background-color: #4B9E65;
line-height: 26px;
color: #fff;
}
嵌入字符串
将变量直接嵌入字符串,需要用 #{ 变量 } (类似 ES6 中模板字符串中的 ${ 变量 })
其实 #{} 中是可以插入任意东西的,这里只用到了插入变量,还可以插入方法等等,高级用法。
scss
$bg-path: "./img"
.card{
background: url("#{$bg-path}/card-bg.png" center center);
}
css
.card{
background: url("./img/card-bg.png" center center);
}
导入文件 @import
通过 @import 可以把多个文件结合到一起
有了这个功能,就可以通过功能拆分 scss 文件,使其更结构化,比如,可以分成:变量类,按钮类,列表类,字体类,排版类等等。
拆分成多个文件的时候,以 _开头命名的文件,不会被像 phpStorm 中的 file watcher 自动预编译成css文件,less 没有这效果,在这一点上 scss 很不错。
比如,我一个项目的 css 结构是这样的:以 _ 开头的都是整个项目的 css 的结构部分,像底部按键、表单、按钮、通用方法等。最后都整合在 pay.scss 中
css/
├── _agent.scss
├── _form.scss
├── _mixin.scss
├── _navbar.scss
├── _normalize.scss
├── _regist.scss
├── _reset.scss
├── _tabbar.scss
├── _trade.scss
├── _trand-time.scss
├── _trand-tradition.scss
├── _usercenter.scss
├── _utility.scss
├── _variables.scss
├── _wallet.scss
├── pay.css
├── pay.css.map
└── pay.scss
_variables.scss
$bg-btn: #ddd;
$color-btn: #444;
btn.scss
@import "_variables";
.btn{
display: inline-block;
padding: 3px 6px;
background-color: $bg-btn;
color: $color-btn;
}
生成 css
.btn{
display: inline-block;
padding: 3px 6px;
background-color: #ddd;
color: #444;
}
相互嵌入 @mixin @include
这个是最常用的,通过 @mixin 定义一个类或方法,在其它地方通过 @include 引用这个方法或类。
如果是方法,还可以定义默认值,也就是说可以某些时候,可以传部分参数。
直接看例子
scss
// @mixin 如果没有调用,不会被渲染
@mixin rounded($conor: 5px){ // 定义 mixin 并设置默认值 5px
-webkit-border-radius: $conor;
-moz-border-radius: $conor;
border-radius: $conor;
}
.btn-rounded{
@include rounded(); // 这里引用上面的 mixin,默认值 5px
}
.btn-big-rounded{
@include rounded(10px); // 这里引用上面的 mixin,并设置值 10px
}
生成 css
.btn-rounded{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.btn-big-rounded{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
继承 @extend
有些时候,需要写的某个类里,包含另一个类的所有声明。
如: 警告按钮,包含所有警告颜色类的内容。
scss
.danger{
background-color: #FF3B30;
}
.round{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.btn{
display: inline-block;
padding: 3px 6px;
}
.btn-danger{
@extend .danger, .round, .btn;
}
生成 css
.danger, .btn-danger {
background-color: #FF3B30;
}
.round, .btn-danger {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.btn, .btn-danger {
display: inline-block;
padding: 3px 6px;
}
@extend 注意事项:
不能继承 @extend .danger.text 这种连续组合的类,应该写为 @extend .danger, .text
常用方法
不知道别人,反正我最常用的就是颜色方法了。列举常用的颜色方法
lighten (颜色, 百分比) // 调亮
darken (颜色, 百分比) // 调暗
saturate (颜色, 百分比) // 调高饱和度
desaturate (颜色, 百分比) // 降低饱和度
scss
$green: #4B9E65;
.green{
background-color: $green;
}
.green-lighten{
background-color: lighten($green,20%);
}
.green-darken{
background-color: darken($green,20%);
}
.green-saturate{
background-color: saturate($green,20%);
}
.green-desaturate{
background-color: desaturate($green,20%);
}
生成 css
.green {
background-color: #4B9E65;
}
.green-lighten {
background-color: #88c79c;
}
.green-darken {
background-color: #2a5939;
}
.green-saturate {
background-color: #34b55c;
}
.green-desaturate {
background-color: #62876e;
}
其它
方法 @function
方法以 @function 开头,以 @return 结尾,也就是说,方法的定义,必须要有返回值
详见:https://sass-lang.com/documentation/at-rules/function
调试方法 @error @warn @debug
像js一样,用于输出提示信息
- @debug: 普通输出
- @warn: 警告输出
- @error: 错误输出
代码结构
声明
通用
- 变量声明, $var: value
- 控制声明,@if @each
- @error,@warn,@debug
CSS
- 样式,h1 { ... }
- 样式@ @media @font-face
- @at-root
顶级
- 导入 @import
- 混合 @mixin
- 方法定义 @function
表达式
- 数字 12 100px
- 字符串 Helvetina Neue bold
- 颜色 #ffffff blue
- 布尔值 true false
- null
- 属性值组 border: 1px solid #ccc
- Maps (“background”: red, “foreground”: pink)
运算符
- == !=
- + - * / %
- < <= >=
- and or not
- + - / 连接字符
- ( )
其它
- 变量 $var
- 方法调用 nth($list,1) var(--main-bg-color)
- 特殊方法 calc(1px + 100%) url(http://myapp.com/assets/logo.png)
- 父选择器 &
- !important
注释
/* 多行注释
可以多行
在非压缩模式下,这种注释会被输出到 css 中
*/
// 单行注释
// 这种注释不会输出到 css 中
特殊方法
CSS 本身自带一些方法,大多数方法都能与SCSS方法和平共存,但有些会产生冲突,如url()
如果 url() 传入的参数是有效的带引号的url,sass不会处理它,但还可以往其中插入变量,如果不是有效的带引号的 url,带有方法或变量的,sass就把它当成正常的方式识别。如:
$bg-path: "./pics"
.card-bg{
background: url("#{$bg-path}/card-bg.png") center center;
}
// 或
.card-bg{
background: url($bg-path+"/card-bg.png") center center;
}
都会输出为
.card-bg{
background: url("./pics/card-bg.png") center center;
}
例子 .btn
有时候,比如,你需要写一个按钮类 .btn-success, .btn-danger, .btn-default, .btn-warning,如果单个定义的话,会很麻烦,现在用了方法,就可以直接填参数完成了。
scss
$green: #4B9E65;
$blue: #5A8DEE;
$yellow: #F8CE5E;
$red: #CD594B;
@mixin btn-template($bgcolor,$fcolor:white){
// 定义了两个参数,第二个参数有默认值
// 也就是说这个方法可以值一个或两个参数
// 另外 带 () 参数的方法不会把自身渲染到 css 中,只有调用才会渲染
color: $fcolor;
border-color: darken($bgcolor, 3%);
background-color: $bgcolor;
&:hover {
background-color: darken($bgcolor, 5%);
}
&:active {
background-color: darken($bgcolor, 10%);
}
}
.btn-success{
@include btn-template($green)
}
.btn-primary{
@include btn-template($blue)
}
.btn-warning{
@include btn-template($yellow)
}
.btn-danger{
@include btn-template($red)
}
上面的 scss 输出为下面的内容,有没有很厉害
.btn-success {
color: white;
border-color: #46945e;
background-color: #4B9E65;
}
.btn-success:hover {
background-color: #438d5a;
}
.btn-success:active {
background-color: #3b7b4f;
}
.btn-primary {
color: white;
border-color: #4c83ed;
background-color: #5A8DEE;
}
.btn-primary:hover {
background-color: #437dec;
}
.btn-primary:active {
background-color: #2c6de9;
}
.btn-warning {
color: white;
border-color: #f7ca4f;
background-color: #F8CE5E;
}
.btn-warning:hover {
background-color: #f7c746;
}
.btn-warning:active {
background-color: #f6bf2d;
}
.btn-danger {
color: white;
border-color: #ca4e3f;
background-color: #CD594B;
}
.btn-danger:hover {
background-color: #c74737;
}
.btn-danger:active {
background-color: #b34032;
}
学习 scss 最好的例子
- Bootstrap v3 - less 语言: https://github.com/twbs/bootstrap/tree/v3-dev
- Bootstrap v4 - scss 语言: https://github.com/twbs/bootstrap
就是去看 bootstrap v4 的样式源码,bootstrap v4 就是用 scss 写的
如果想学 less 可以看这篇 [ less基础用法 ] - SegmentFault -CSDN, bootstrap v3 就是用 less 写的。
下载 bootstrap 的 scss 源码,看里面怎么写的,进步很快的。