SCSS语法的使用，杠杠的资源。新手学习SCSS入门

创立的初衷

只是给自己方便观看，便于下次项目使用 O(∩_∩)O哈哈~

定义变量与使用

$color:pink;
$right:right;
.test1{
	background-color:$color;
}
>> .test1{background-color:pink;}

.test2{
	border-#{$right}:1px solid #000;
}
>> .test2{border-right:1px solid #000;}

常用的根级写法

.text3{
	.text33{
		border:1px solid;
	}	
}
>> .text3 .text33{border:1px solid;}

.text3{
	&-1 .text33{
		border:1px solid;
	}	
}
>> .text3-1 .text33{border:1px solid;}

加减乘除

$paramer:3;
.text4{
	height:(1px+3px);
	width: (96px/6);
	right: $paramer*4;
}

继承性

.bd1{border:1px solid red;}
.class5E{
	@extend .bd1;
	font-size:20px;
}
>> .class5E{border:1px solid red; font-size:20px;}

复用性

@mixin text6 {height:50px;left:20px;}
.text6M{
	@include text6
}
>> .text6M{height:50px;left:20px;}
//这里的mixin就是定义一个可以复用的代码段，当然我们也可以给它传递一个参数，就像这样一样：
@mixin text66($height){height:$heigth;left:20px;}
.text6N{
	@include text66(100px);
}	
>> .text6N{height:100px;left:20px;}

条件判断

.text7{
	@if 1 +2 == 3 {
		border:1px solid ;
	}
	@if 5 < 3 {
		border:2px dsahed red;
	}
}
当然，我们都知道if一般是要和else配合的，所以我们也可以这样写
.test77{
	@if lightness($color) > 30%{
		background-color:#fff;
	}@else{
		background:#0ff;
	}
}
这里的lightness是一个scss颜色函数，$color指向之前定义的值。

For,While,Each循环

//for 循环
@for $i from 1 to 5 {
	.item-#{$i} {
		border:#{$i}px solid;
	}
}
//while 循环
$m:8;
@while $m > 0 {
	.items-#{$m} {
		width:2em*$m;
	}
	$m:$m - 2 ;
}
//这里可以对$m进行运算 让它每次都减去2
//each 语法
@each $img in q,w,e,r {
	.#{$img} {
		background-image:url('#{$img}.png')
	}
}

函数式

@function double ($number){
	@return $number*2;
}
.text9{
	font-size:double(20px);
}
>> .text9{font-size:40px;}

import导入

@import 'other.scss'
这样就在你现在的scss中导入了other.scss编写的scss

scss语法并不是很多，但是需要开发者灵活使用，这样才能事半功倍，要深刻理解scss变量，以及如何插入变量，以及循环语法和函数思想，如果遇到不太清楚的可以给博主留言哈，欢迎指正和提出问题。

原文地址：https://www.cnblogs.com/dreamsboy/p/6658695.html