版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
Ruby 引入
下载
去官网 https://rubyinstaller.org/downloads/
可能会比较慢,国外的
安装
然后安装(尽量不要安装在系统盘),注意选择第一项
安装 sass
打开 cmd,快捷键 window + R,然后输入 cmd
检查是否安装好 Ruby:输入 ruby -v
,如果你成功安装好 Ruby 的话,就会在下面弹出版本号
在 cmd 中输入gem install sass
等待几分钟
WebStorm 环境的配置
操作
概念
Sass
是一种 预处理语言
官网上给的是这样的:“世界上最成熟、最稳定、最强大的专业级CSS扩展语言!”- Less 也是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
这里我用的是 Sass
声明 & 使用变量
用 $变量名:值;
来写变量
//示例
$pink:hotpink;
div{
color:$pink;
}
值的运算
Sass 中的编译可以使用运算了!!
.box{
margin:(14px)/2;
top:20px + 50px;
left: $num * 3;
}
在 Scss.scss
中写完之后,其子元素中的 Scss.css
就会自动算好值,然后渲染到页面上,如下图所示
后代
Sass 中的后代,可以跟 body 中的书写格式类似,如果你想写 div 下 h1 的属性,下面有几种方法可以实现
/*Descendants*/
/*can write like this*/
div h1{
color: beige;
}
/*also this*/
div{
h1{
color:beige;
}
}
父元素
比方说想给 a 标签加个 hover 属性,可以这么写
/*a hover use '&',this sign means father element*/
a{
color:skyblue;
&:hover{
color: pink;
}
}
其相应的 css 文件如下
a {
color: skyblue; }
a:hover {
color: pink;
}
继承
继承用关键字 @extend
.class1{
border:1px solid deepskyblue;
}
.class3{
margin: 22px 20px 30px 40px;
}
.class2{
/*inherit*/
@extend .class1,.class3;
}
相应的 css 文件如下
.class1, .class2 {
border: 1px solid deepskyblue; }
.class3, .class2 {
margin: 22px 20px 30px 40px; }
原理:它用的并集选择器
函数声明
- 函数定义 用关键字
@mixin 函数名(形参){函数体}
- 函数调用 用关键字
@include 函数名(实参)
这是第一个例子
/*write a function*/
@mixin test_plu($val:10px){
width:$val;
}
div{
/*@include + function's name()*/
@include test_plu(20px);
}
相应的 css 文件如下
div {
/*include + function's name()*/
width: 20px; }
这是第二个例子
@mixin routed($fon,$hon,$rad:10px){
border-#{$fon}-#{$hon}-radius:$rad;
-webkit-border-#{$fon}-#{$hon}-radius:$rad;
-moz-border-#{$fon}-#{$hon}-radius:$rad;
}
div{
@include routed(left,top,200px);
}
相应的 css 如下
div {
border-left-top-radius: 200px;
-webkit-border-left-top-radius: 200px;
-moz-border-left-top-radius: 200px; }