一文学会sass常用语法
前言
项目一直用的scss,但是一直没有好好学些sass的用法,一直用的只有定义变量和选择器嵌套等寥寥几个功能(捂脸).后来仔细看了一下sass中文网,感觉自己错过了一个世界…
用法
1.其中一些简单的用法
- 使用 $定义变量;
- 选择器嵌套包括使用&表示元素本身;
2.一些平时会用到的用法
2.1 属性嵌套
带有相同前缀的css属性可以用嵌套的规则书写
.text-item{
font:{
size:30px;
weight:bold;
}
text:{
align:center;
indent:2em;
}
}
// 也可以给前缀本身添加属性
.text-container{
font:12px/24px {
weight:600;
}
}
2.2 插值语句
使用${}可以在选择器或属性名中使用变量
例如
$textVar:item
$widthName:width
.text-#{
$textVar}{
#{
$widthName}:10px;
}
在属性值也可以使用#{},但是没有直接使用变量方便,但是可以用在一些特殊的场合,如阻止数值运算等.
2.3 数值运算
包括(+, -, *, /, %)
.text-item{
margin-left:10px+2px;
}
编译为
.text-item{
margin-left:12px
}
由于/本身在css中就有含义,因为只有以下几种情况/会被当做除法进行处理
- 值是算数表达式的一部分,如
1px+10px/2px; - 运算表达式用()包裹,如
(10px/2px); - 运算表达式中使用了变量,如
$width/2
如果使用了变量,但是仍然希望不进行运算处理,可以使用#{},如
#{$width} / 2
#{$width} / #{$num}
2.4 @media
@meida在原来css的功能上扩展了可以在选择器中嵌套书写@media,不会打乱正常的书写流程
$mediaDevice :screen;
.text-item{
width:10px;
@media #{
$mediaDevice}{
width:20px;
}
}
编译后
.text-item {
width: 10px;
}
@media screen {
.text-item {
width: 20px;
}
}
2.5 @extend
@extend可以在一个选择器上延伸拓展出其他选择器的样式
例如
.text1{
color:red;
width:100px;
height:100px;
}
.text2{
color:blue;
}
.text-item{
@extend .text1,.text2;
line-height:20px;
}
编译为
.text1, .text-item {
color: red;
width: 100px;
height: 100px;
}
.text2, .text-item {
color: blue;
}
.text-item {
line-height: 20px;
}
有时候,我们有些样式是专门为了@extend使用的,为了不增加编译之后代码的体积,可以用%selector表示
%text{
font:12px/24px;
}
.text-item{
@extend %text;
width:20px;
}
编译后
.text-item {
font: 12px/24px;
}
.text-item {
width: 20px;
}
如果在@media中使用@extend,需要注意些东西,@extend的选择器,必须也在同样的@media中,但是允许分开写
/* 可以 */
@media screen{
%text{
font:12px/24px;
}
.text-item{
@extend %text;
width:20px;
}
}
/* 报错 */
%text{
font:12px/24px;
}
@media screen{
.text-item{
@extend %text;
width:20px;
}
}
/* 可以 */
@media screen{
%text{
font:12px/24px;
}
}
@media screen{
.text-item{
@extend %text;
width:20px;
}
}
2.6 控制指令
1.@if
@if指令后接一个判断表达式,如果表达式不为false或者null,则编译后面的{}中的内容
$text:text1;
.text-item{
@if $text==text {
border:1px solid red}
@else if $text==text1 {
border:1px solid green}
@else {
border:1px solid blue}
}
编译为
.text-item {
border: 1px solid green;
}
2.@for
@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动,使用格式
@for $var from < start > through < end > : 包含start和end
@for $var from < start > to < end > : 包含start,不包含end
例如
@for $i from 1 through 3{
$num:$i*4;
.m-t-#{
$num}{
margin-top:#{
$num}px;
}
}
编译
.m-t-4 {
margin-top: 4px;
}
.m-t-8 {
margin-top: 8px;
}
/* 如果将through改为to,将不包含下面样式 */
.m-t-12 {
margin-top: 12px;
}
3.@each
@each 可以用于列表的循环输出,表达式为 @each $i in < List >,如下
$animals:bird,dog,cat;
@each $item in $animals{
.item-#{
$item}{
background:url($item);
}
}
编译之后
.item-bird {
background: url(bird);
}
.item-dog {
background: url(dog);
}
.item-cat {
background: url(cat);
}
也可以一次循环多个list,循环规则如下
@each $item,$index in (bird,1),(dog,2){
.item-#{
$index}{
background:url($item);
}
}
也可以循环maplist
$mapList:(1:dog,2:cat,3:bird);
@each $index,$item in $mapList{
.item-#{
$index}{
background:url($item);
}
}
2.7 混合指令
1.mixin
可以使用mixin定义重复使用的样式,避免重复操作,使用是通过@include引入,用法如下,支持大部分sass语法
@mixin errText{
color:red;
text-decoration:underline;
}
.text-item{
@include errText;
}
/* 编译之后 */
.text-item {
color:red;
text-decoration:underline;
}
2.参数传入
很好理解,就是在使用@include引用的时候通过传入特定的参数,生成相应的样式
@mixin btnStyle($color,$width,$lineHeight){
color:$color;
width:$width;
line-height:$lineHeight;
};
.text-btn{
@include btnStyle(blue,100px,20px)
}
/* 编译之后 */
.text-btn {
color: blue;
width: 100px;
line-height: 20px;
}
当然了,在mixin上可以使用默认值(使用默认值的参数最好放在参数的后面)
@mixin btnStyle($color:red,$width:200px,$lineHeight:20px){
color:$color;
width:$width;
line-height:$lineHeight;
};
.text-btn{
@include btnStyle()
}
/* 编译之后 */
.text-btn {
color: red;
width: 200px;
line-height: 20px;
}
也可以使用指定变量来传参
@mixin btnStyle($color:red,$width:200px,$lineHeight:20px){
color:$color;
width:$width;
line-height:$lineHeight;
};
.text-btn{
@include btnStyle($color:green)
}
/* 编译之后 */
.text-btn {
color: green;
width: 200px;
line-height: 20px;
}
如果存在未知数量的参数,如box-shadow的参数,可以使用参数变量...的定义方式,表示将传入的参数作为list处理,这里跟ES6中的扩展运算符...很像.
@mixin boxShadow($shadow...){
box-shadow:$shadow;
}
.text-item{
@include boxShadow(0px 4px 5px #666, 2px 6px 10px #999)
}
/* 编译之后 */
.text-item {
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
也可以使用...使变量展开
@mixin btnStyle($color,$width,$height){
color:$color;
width:$width;
height:$height;
}
$style:(red,100px,200px);
.text-btn{
@include btnStyle($style...);
}
/* 编译之后 */
.text-btn {
color: red;
width: 100px;
height: 200px;
}
2.8 函数
函数的存在是为了减少重复的表达式运算,函数的定义方式如下,参数的使用方法和mixin一样
@function functionName($var1...){
@return 表达式
}
用法如下
@function getNum($num){
@return $num*2/5*10
}
.text-item{
width:#{
getNum(0.1)}px;
}
/* 编译之后 */
.text-item {
width: 0.4px;
}
总结
sass中的功能还有很多,这里仅仅筛选出几种常用的语法,具体更多的还请参考
sass中文文档