day10 Sass 插件 + webstorm eclipes 按键设置

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



    
    
    



    sadfsdfsdf

//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); }