day10

A我今天学了什么

1.配置webstorm的安装环境

http://www.jianshu.com/p/c482c6ea0a4b   //简书里有详细步骤

2.sass的语法

http://www.jianshu.com/p/0f96f42b6924

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 {
    hi{
      color:red;
    }
  }

2.4代码重用

2.4.1继承
//SASS允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 {
    border: 1px solid #ddd;
  }

.class2 {
    @extend .class1;
    font-size:120%;
  }

2.4.2Mixin

//是可以重用的代码块
 @mixin left {
    float: left;
    margin-left: 10px;
  }

div {
    @include left;
  }
//mixin的强大之处,在于可以指定参数和缺省值。 
@mixin left($value: 10px) {
    float: left;
    margin-right: $value;
}
div {
    @include left(20px);
  }
//可以传递多个参数 
@mixin wh($w:100px,$h:100px) {
    width:$w;
        height:$h;
}
div {
    @include wh(200px,200px);
  }

2.5插入文件

@import命令,用来插入外部文件。

 @import "path/filename.scss";
如果插入的是.css文件,则等同于css的import命令。

@import "foo.css";

我掌握了什么

1.配置webstorm的安装环境

http://www.jianshu.com/p/c482c6ea0a4b   //简书里有详细步骤

2.sass的语法

http://www.jianshu.com/p/0f96f42b6924

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 {
    hi{
      color:red;
    }
  }

2.4代码重用

2.4.1继承
//SASS允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 {
    border: 1px solid #ddd;
  }

.class2 {
    @extend .class1;
    font-size:120%;
  }

2.4.2Mixin

//是可以重用的代码块
 @mixin left {
    float: left;
    margin-left: 10px;
  }

div {
    @include left;
  }
//mixin的强大之处,在于可以指定参数和缺省值。 
@mixin left($value: 10px) {
    float: left;
    margin-right: $value;
}
div {
    @include left(20px);
  }
//可以传递多个参数 
@mixin wh($w:100px,$h:100px) {
    width:$w;
        height:$h;
}
div {
    @include wh(200px,200px);
  }

2.5插入文件

@import命令,用来插入外部文件。

 @import "path/filename.scss";
如果插入的是.css文件,则等同于css的import命令。

@import "foo.css";

c我没有掌握什么

全部掌握

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • A我今天学习到了什么 配置webstorm的安装环境 安装后查看软件Rudy 2.4.1-1/start Comm...
    尘榆骡厌阅读 246评论 0 0
  • A今天学了什么 1.配置webstorm的安装环境 2.sass的语法 3.计算功能 4.嵌套 5.代码重用 6....
    执念念不直阅读 162评论 0 0
  • A 今天我学到了什么 1 webstrom下Sass安装 1.1 安装软件 ruby 1.2 cmd打开命令行输入...
    yuxiaohu阅读 343评论 0 0
  • A我今天学了什么 webstrom下Sass安装 2.sass的语法 2.2计算功能 2.3嵌套 2.4代码重用 ...
    孔子曰_f425阅读 280评论 0 0
  • 对机械师1的印象还是蛮深刻的,而且我大杰森的电影怎么能不看呢~不过~有点小小失望哦~虽然电影好评还是蛮多的,但总觉...
    闻香识女孩_阅读 301评论 0 0