首页 > 代码库 > SASS的应用
SASS的应用
SASS的简单介绍：SASS是一门对css进行编译的扩展语言,使css编译更加具有逻辑性和可塑性
SASS的安装与配置
第一步：安装ruby。
ruby的官方下载地址：http://rubyinstaller.org/downloads。
注意事项：1.应当下载与系统匹配的版本,最好不要下载最新版本。对应64位操作系统,一般下载2.3.1版本。
2.安装ruby时应当勾选Add Ruby executables to your PAIH,添加环境变量。
第二步：
方法一：通过cmd命令行中执行gem install sass安装sass。使用sass -v 查询SASS的版本号,如果显示版本号证明SASS安装成功。
否则,则需要用到下面的方式进行安装了。
方法二：同样在cmd命令中执行gem sources --remove http://rubygems.org/ 回车
gem sources -a http://gems.ruby-china.org 回车
gem install sass 回车
同样需要用sass -v 来检测一下sass 版本号
更新SASS的方法为：在cmd命令行中执行gem update sass
第三步：在webstorm编译工具中如何使用SASS
1.打开webstorm,通过下面的方式配置SASS。
通过file -->Settings -->Tools -->File Watchers --> + --> SCSS --> Arguments -->
填写配置信息：--no-cache --update --style expended $FileName$:FileNameWithoutExtension$.css
点击确定即可。
当然有的webstorm不需要配置,当项目中用到SASS文件时,就会在右上角提示添加SASS配置信息,点击Add 添加即可
这样编译sass文件时就会同时监听出对应的css文件。
注意：sass文件和对应的css文件的目录等级一致,即处于同级目录下。
SASS的语法结构
参考网站：http://sass.bootcss.com/docs/sass-reference/
下面介绍几种SASS语法的基本用法。
1.变量的定义：
$变量名:值 eg：$color:#efefef;
2.嵌套语法
&:用于引用父类名称 eg: & &-title{}
3.@mixin语法
语法结构：
@mixin 名称 ($参数..,$参数){
.........
}
//使用@include 名称 ($参数,...){
........
}
4.@extend继承语法
.mm {
background-color:red;
a {
text-align:center;
}
}
.mm2 {
@extend .mm;
background-origin:border-box;
}
5.占位符 %placeolder
%icon {
transition:background-color ease .2s;
margin: 0 .5em;
}
.error-icon{
@extend %icon;
/*错误图标指定样式...*/
}
.info-icon {
@extend %icon;
/*信息图标指定的样式...*/
}
6.if..else
$theme:"ddd";
.testif {
@if($theme == light){
background-color:lightblue;
} @else if ($theme == red){
background-color:red;
} @else {
background-color:black;
}
}
7 for
@for $i from 1 through 5 {
.col-#{$i}{
width:10% * $i;
}
}
8.function
$fontsize:75
@function pxtorem($px){
@return $px/$fontsize + rem;
}
.box{
width: pxtorem(100);
}
SASS的应用