你真的会用scss吗 scss常用语法总结
Posted MmM豆
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了你真的会用scss吗 scss常用语法总结相关的知识，希望对你有一定的参考价值。
文章目录
对于scss文档写了很多，但是常用语法就这些，下面做一个总结
一、嵌套
#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;
二、父选择器
对于class命名是个难题，所以我们有时习惯用前缀来区别不同
例如：
<div class="home">
<div class="home-title"></div>
<div class="home-content"></div>
<div class="home-footer"></div>
</div>
scss写法
.home
&-title
background:red;
&-content
background:black;
&-footer
background:green;
编译后
.home-title
background:red;
.home-content
background:red;
.home-footer
background:red;
三、变量
scss定义变量很简单就是加个$,可以写在 内也可以不写，代表着全局变量和局部变量
$width:5px;
.main
$heigth：10px;
width:$width;
.child
heigth:heigth;
width:$width;
四、插值语句
# 代表的插值
$name: foo;
$attr: border;
p.#$name
#$attr-color: blue;
$font-size: 12px;
$line-height: 30px;
font: #$font-size/#$line-height;
五、运算与数据类型
scss支持js的运算，
数字运算， +, -, *, /, %
关系运算 <, >, <=, >= ==, !=
布尔运算 and or not，
数组 用空格逗号隔开都可以称为数组 1 2 或者 1,2 ( )代表空数组
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
数字，1, 2, 13, 10px
maps, 相当于 javascript 的 object，(key1: value1, key2: value2)
$social-colors: (
dribble: #ea4c89,
facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee
);
//假设要获取 facebook 键值对应的值 #3b5998，我们就可以使用 map-get() 函数来实现：
.btn-dribble
color: map-get($social-colors,facebook);
编译后
.btn-dribble
color: #3b5998;
五、导入scss @import
@import "foo.scss";
六、继承样式 @extend
当下面的样式和上面样式完全相同，可以用@extend直接继承上面的样式，同时在编译的时候，scss会在合并样式的时候，避免重复的css
.error
border: 1px #f00;
background-color: #fdd;
.seriousError
@extend .error;
border-width: 3px;
对于伪类只能继承一层，但是可以延展给选择器列
#fake-links .link //延展给所有选择器
@extend a;
a
color: blue;//只能继承到一层
&:hover //这里不会被继承
text-decoration: underline;
编译为
a, #fake-links .link
color: blue;
a:hover, #fake-links .link:hover
text-decoration: underline;
多层是可以继承的
示例 如下 可以知道@extend是可以多个使用，同时可以继承嵌套的scss，但是有个问题，如果嵌套中使用了父选择器
那么最外层，下面必须存在css样式不然会报错
.large-text
.title
color: blue;
background-color: red;
//使用
div
@extend .large-text;
@extend .a;
padding: 4px;
margin-top: 10px;
.a
font-size: 16px; //这里必须有css，不然会找不到.a
&-hover //这里不会被继承
color: blue
七、常用的指令
指令常用于封装工具样式，我会单独用一篇文章来阐述，工具样式的封装，提供编写效率
@each
示例
@each $var in(left,center,right)
.text-#$var
text-align:$var;
编译后
.text-left
text-align:left;
.text-center
text-align:center;
.text-right
text-align:right;
示例2：
$color
"black":#000;
"white":#fff;
@each $colorKey,$color in $color
.text-$colorkey
color:$color
编译后
.text-black
color:#000;
.text-white
color:#fff;
@mixin 和 @include
用处类似于extend，区别在于mixin是可以传递参数
这2个是对应关系，一个定义混合样式，一个使用
示例1
@mixin large-text
font: //scss允许这种写法，但是基本不咋用
family: Arial;
size: 20px;
weight: bold;
color: #ff0000;
a
color: blue;
background-color: red;
//使用
page-title
@include large-text;
padding: 4px;
margin-top: 10px;
编译后
.page-title
a
color: blue;
background-color: red;
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px;
示例2 函数写法
@mixin sexy-border($color, $width)
border:
color: $color;
width: $width;
style: dashed;
p @include sexy-border(blue, 1in);
//第二种写法
@mixin sexy-border($color, $width: 1in) //可以给与默认值，
border:
color: $color;
width: $width;
style: dashed;
p @include sexy-border(blue); //当不传递的时候默认第二个值
h1 @include sexy-border($color: blue, $width: 2in); //也可以添加关键词，这样顺序可以打乱
以上是关于你真的会用scss吗 scss常用语法总结的主要内容，如果未能解决你的问题，请参考以下文章