A 今天我学到了什么
1 webstrom下Sass安装
1.1 安装软件 ruby
1.2 cmd打开命令行输入
gem source -a http://rubygems.org
gem install sass
1.3 在命令行输入
sass -v
//看sass是否安装成功
14.回到webStrom
webstorm-File-settings-Tools-FileWatchers
1.5 添加SCSS工具
image.png
2 Sass基本功能
2.1 变量
$bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
.header{
margin-#{$place}:20px;
}
2.2 计算功能
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
2.3 嵌套
div h{
color:red;
}
可以写成
div {
h{
color:red;
}
}
2.4 代码重用
2.4.1 继承
SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
2.4.2 Mixin
是可以重用的代码块
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
2.4.3 mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
div {
@include left(20px);
}
//可以传递多个参数
@mixin wh($w:100px,$h:100px){
width:$w;
height:$h;
}
.header{
@include wh;
background:pink;
}
.footer{
@include wh(200px,200px);
background: blue;
}
下面是一个mixin的实例，用来生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
2.4.4 插入文件
@import命令，用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
@import "foo.css";
3 webstorm eclipes 按键设置
file - settings - keymap - kemap:Eclipes
4 自己代码
1 CSS文件新建 base.scss 样式文件
2 在base.scss中写完代码后,会自动生成base.css 和 base.css.map文件
//HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/base.css"/>
</head>
<body>
<div class="box">
<a href="#">sadfsdfsdf</a>
</div>
<div class="top"></div>
</body>
</html>
//SCSS
@mixin wh($w:100px,$h:100px,$b:red,$r:30px,$ro:30deg){
width: $w;
height: $h;
background-color: $b;
border-radius: $r;
transform:rotate($ro);
}
.box{
@include wh;
}
.top{
@include wh(200px,300px,pink,100px,90deg)
}
//自动生成的CSS
.box {
width: 100px;
height: 100px;
background-color: red;
border-radius: 30px;
transform: rotate(30deg); }
.top {
width: 200px;
height: 300px;
background-color: pink;
border-radius: 100px;
transform: rotate(90deg); }
