SCSS在服务器端使用的
安装SCSS的步骤
npm install -g node-sass
node-sass -v
显示版本号单文件转换
在项目路径下 node-sass scss文件 scss文件
多文件转换
node-sass scss文件夹 -o css文件夹
单文件监听
node-sass -w scss文件 css文件
多文件监听
node-sass -w scss文件夹 -o css文件夹
$_red=
嵌套有效的减少我们的代码量
选择器1{
样式声明;
选择器2{
样式声明;
}
}
/* 会自动生成后代选择器 */
/* 如果嵌套伪类选择器,需要在:前添加占位符,不然会有空格 */
/* 例如 */
a{
color:#001;
&:hover{
...
}
}
案例
/* 属性的嵌套 */
div{
border:{style:solid;width:2px;color:#000;}
}
/* 生成 */
div{
border-width:2px;
border-style:solid;
border-color:#000;
}
/* 群主的嵌套 */
div,p{
a{color:#111;}
}
/* 生成 */
div a,p a{
color:#111
}
把多个选择器都会使用的一部分样式封装起来,只写一遍
需要时候就调用,实现代码重用
声明混合器 @mixin 混合器名称{样式声明}
在选择器中调用混合 @include 混合器名称
带参数的混合器
@mixin 混合器名称(形参1,形参2。。。。){样式声明}
@include 混合名称(实参1,实参2。。。。)
混合器使用最多的场景,是css hack (针对低版本的浏览器做兼容)
案例
/* 声明混合器 */
@mixin my_border{
border:1px solid #f00;
box-shadow:10px 10px 5px 5px #f00;
border-radius:50%
}
@mixin my_border2($width,$style,$color,$size){
border:$width $style $color;
border-radius:$size
}
/* 调用 */
div{
width:100px;
height:100px;
@include my_border
}
h2{
@include my_border2(3px,dashed,#000,50%)
}
@extend 选择器名称
一个选择器可以使用另一个选择器的所有样式
案例
/* scss 继承*/
.my_parent{
width:100%;
height:100%;
}
.my_child{
color:red;
@extend .my_parent
}
/* css */
.my_parent,.my_child{
width:100px;
height:100px
}
.my_child{
color:red
}
scss中的运算会自动的转换单位
但是相对单位不可以转换,会报错。
加 +
带双引号的+不带双引号=带双引号
不带双引号+带双引号=不带双引号的字符串
案例
<!-- 加法 -->
p:before{
content:'xxxx'+yahe;
font-family:A+"rial";
}
减 -
在scss中,变量名称可以包含-
所以scs是有时候分不清楚,我们写的-是减法还是变量的一部分
需要在减号前后加空格
案例
<!-- 减法 -->
$my-width:5%;
$my-max-width:$my-width*4
p{width:$my-max-width - $my-width}
除 /
在scss中,/号的作用,是除法和分隔符
以下情况,会被认为是除法
案例
p{
font:(10px/5px)+px;
$width:1000px;
width:$width/2;
height:(500px/2);
margin:5px+8px/2px;
}
插值变量 #{}
Content:“zhangdaxin ate #{50+30} baozis”;
#{ }
颜色的运算
采用分段计算方式
红色与红色计算,绿色与绿色计算,蓝色与蓝色计算
#112233+#223344=#335577
rgb(1,2,3)+rgb(4,5,6)=rgb(5,7,9)
注意:raba的计算,要求alpha必须相同才能计算
案例
p{
color:rgb(1,2,3)+rgb(1,2,4);
background:#112233+#445566;
border-color:rgba(1,1,1,0.5)+rgba(2,3,4,0.5)
}
scss中预定义了很多函数,有些函数甚至可以在CSS中使用
rgba(red,green,blue,alpha)
hsl(hue,saturation,lightness)
hue:色调 0~360 分为3个色段 0~120 120~240 240~360
saturation:饱和度0~100%
lightness:亮度0~100%
数学函数(跟js的Math对象超级相似)
字符串的函数
unquote($str)去掉双引号
quote($str)添加双引号
to_upper_case($str)转大写
to_lower_case($str)转小写
自定义函数 @function函数名(){}
/* 无参函数 */
@function 函数名称(){
@return 返回值
}
/* 带参函数 */
@function 函数名称($参数1,$参数2){
@return $参数1+$参数2
}
if-else if-else
$type:moon;
h2{
@if $type===sun{
color:#f00;
}@else if $type===moon{
color:#00f;
}@else{
color:#0f0;
}
}
@mixin my_bg($color1,$color2){
background:-webkit-linear-gradient(top,$color1,$color2)
background:-o-linear-gradient(top,$color1,$color2)
background:-moz-linear-gradient(top,$color1,$color2)
background:-ms-linear-gradient(top,$color1,$color2)
}
@function get_bg($n){
@if($n>95){
@return 1;
}@else if($n>80){
@return 2;
}@else if($n>60){
@return 3;
}@else{
@return 4;
}
}
div{
$resule:get_bg(91);
@if($resule==1){
@include my_bg(#f00,#faa);
}@else if($resule==2){
@include my_bg(#ff0,#ffa);
}@else if($resule==3){
@include my_bg(#00f,#ffa);
}@else if($resule==4){
@include my_bg(#f00,#faa);
}
}