sass五分钟入门

sass五分钟入门

不废话直接干货开整。

官网

http://www.sass-zh.com/注意不用这个，为啥，不好用，不好理解

用这个http://www.sasschina.com/guide/

安装：

​ 1.安装node 和ruby怎么装不废话，官网直接下载安装，会装qq就会。成功验证ruby -v

​ 2.安装sass 方法gem install sass 验证 sass -v

用：

​ 新建一个 test.scss

​ 编译：sass test.scss test.css

---

sass语法

变量

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}

嵌套

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  #content aside { background-color: #EEE }
}

 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

父选择符

article a {
  color: blue;
  &:hover { color: red }
}
编译后
article a { color: blue }
article a:hover { color: red }

最后说一个重点

混合器，说白了类似于css class,一次包裹一堆代码

//定义
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
//调用
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最终生成：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

关键的关键，这个必须理解传参，否则你用sass写模块没戏，如下：

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

只说两句话，第一句，sass的作用是让你以前写重复砸碎的代码模块化，慢慢切图就变成了修改函数参数一样简单，对于

工程最简化减轻前端和设计师压力很有好处，事实上用好了，一天切是个页面并不是啥大事儿。

第二点误区：

很多网上说用函数实现 px2rem,像素转换成rem 还要前端人员写这样的代码

@function pxTorem($px){//$px为需要转换的字号
    @return $px / $browser-default-font-size * 1rem;
}
//SCSS
html {
    font-size: $browser-default-font-size;
}
.header {
    font-size: pxTorem(12px);
}

//CSS
html {
  font-size: 16px; }

.header {
  font-size: 0.75rem; }

我只想说，滚，这是在简化前端工作么，真正无侵入的工作是我该怎么用px切用px切，然后上线自动转换成rem。

这个已经在我写的r7里面实现以后慢慢给大家讲实现方法吧。