A 今天我學(xué)到了什么
1 webstrom下Sass安裝
1.1 安裝軟件 ruby
1.2 cmd打開(kāi)命令行輸入
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;
如果變量需要鑲嵌在字符串之中耍群，就必須需要寫(xiě)在#{}之中乐埠。
.header{
margin-#{$place}:20px;
}
2.2 計(jì)算功能
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
2.3 嵌套
div h{
color:red;
}
可以寫(xiě)成
div {
h{
color:red;
}
}
2.4 代碼重用
2.4.1 繼承
SASS允許一個(gè)選擇器，繼承另一個(gè)選擇器禽篱。比如畜伐，現(xiàn)有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的強(qiáng)大之處，在于可以指定參數(shù)和缺省值躺率。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
div {
@include left(20px);
}
//可以傳遞多個(gè)參數(shù)
@mixin wh($w:100px,$h:100px){
width:$w;
height:$h;
}
.header{
@include wh;
background:pink;
}
.footer{
@include wh(200px,200px);
background: blue;
}
下面是一個(gè)mixin的實(shí)例玛界，用來(lái)生成瀏覽器前綴万矾。
@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命令，用來(lái)插入外部文件慎框。
@import "path/filename.scss";
如果插入的是.css文件良狈，則等同于css的import命令。
@import "foo.css";
3 webstorm eclipes 按鍵設(shè)置
file - settings - keymap - kemap:Eclipes
4 自己代碼
1 CSS文件新建 base.scss 樣式文件
2 在base.scss中寫(xiě)完代碼后,會(huì)自動(dòng)生成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)
}
//自動(dòng)生成的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); }
