学习Sass 的基本语法规则[Sass和compass学习笔记]

自从发现可编程的css语法 Sass和基于Sass的css库compass

一个给个人感受像c# 另一个给个人感受像.NET Framework，一切都为了提高开发效率和下降开发大型web的门槛。

当web开发趋势迈进WebApi+Js 时代，compass和Sass 会不会成为web开发的标配？这个得实际开发检验下.

预处理

当web站点变的愈来愈复杂。

先是html 复杂了----》动态编程语言解决方案

js复杂了---》jq和dojo 等解决方案

css如今也变的复杂了，可是css自己没有编程的功能，因此面向css预处理的中间件出现了，想compass和Sass这种想编写程序同样编写css，而后经过预处理，处理为浏览器能够解析的css，下降了构建更增强大的web站点复杂度。

变量

变量和js、c# 里面的变量差很少，都是用来存储东西了，我这样的菜鸟写css，最头疼一次修改好多高度，颜色等等，有了变量，即便是最笨的方法，编写css也比之前快多了了

在 sass 里面变量的标识符是$,话说和jq是同样的标识符呢

例如

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

这样编写的sass版的css在通过compass预处理后是能够正常解析的css，并且每一行还会有行号，用于对照比较，刚开始很是担忧处理前和处理后如何联系到一块儿，排查BUG，后来发现有行号，so 方便

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

嵌套和做用域

之前写css，最蛋疼的就是 css默认规则是一行一行的，BUT css超过一屏幕，我就搞不清楚这些css 是怎么个关系。。。

如今好了 有{} 嵌套和做用域，像写程序同样写css

纳尼，做用域？上面都有了变量跟定得有做用域，不知道做用域的，百度下

sass 的嵌套 和预处理后的css 是按照html对css的继承和处理规则来的，看着比之前舒服多了

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

预处理后 是这样的

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

对于做用域，官方的demo 没有解释，这个是在书里面看到的

例如

div{
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
}

li{
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
}

在不一样 {} 做用域内的变量互不影响

模块

看到这个单词 Partials,真的是喜极而泣啊,之前随便打开一个css文件都是1k行以上,本菜鸟在里面看代码,就好像在迷宫里面迷路同样,

sass的模块化是将须要模块化的css放在一个如下划线开始的单独的文件里面例如_partial.scss,使用这个模块的时候用@import导入便可

不支持模块化css的css框架都是耍流氓!

 

Import 导入模块

在css中使用一个Import 便会像服务器端发起一个请求,在sass中使用Import,compass 能够导入一个模块,并且会合并这个导入的文件.

例如, 重置浏览器默认样式的模块

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

导入是这样导入的

/* base.scss */

@import 'reset';

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

生成的css 是浏览器能够解析的,并且带行号,方便对比

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  background-color: #efefef;
  font-size: 100% Helvetica, sans-serif;
}

sass 中的函数方法--Mixins

函数 有函数名 参数 可选选参数,返回值等

在sass中 这些通通都有!具体我还在看书,这是官方的demo,足以发现mixins 是挺好用的

定义一个方法

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

使用一个方法

.box { @include border-radius(10px); }

能够发现用@mixin开头 后跟方法 名称 括号内为参数,{}中间为返回内容,

使用@include 后跟方法名和括号，即可以调用这个方法

compass预处理后 生成的css以下

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

继承

此继承为sass组织代码的继承规则，非html解析和呈现css时候的继承规则，不要搞混了。。。，虽然生成的代码符合css继承规则。。。。。。

继承 使用的关键字是@extend，使用很简单，来看一个官方的demo

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

预处理后生成的代码

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

操做符

sass 支持+、-、*、/、% 加减乘除和求余，是在是太劲爆了，这样在写宽度和高等等地方有更加方便了

看看官方的demo

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

预处理后的代码

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}