转自：http://www.cnblogs.com/qqloving/p/3676852.html

自从发现可编程的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是一样的标识符呢

例如

1
2
3
4
5
6
7
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
 
body {
  font: 100% $font-stack;
  color: $primary-color;
}

这样编写的sass版的css在经过compass预处理后是可以正常解析的css，而且每一行还会有行号，用于对照比较，刚开始非常担心处理前和处理后如何联系到一起，排查BUG，后来发现有行号，so 方便

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

嵌套和作用域

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

现在好了 有{} 嵌套和作用域，像写程序一样写css

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
 
  li { display: inline-block; }
 
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

预处理后 是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 没有解释，这个是在书里面看到的

例如

1
2
3
4
5
6
7
8
9
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 可以导入一个模块,而且会合并这个导入的文件.

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

1
2
3
4
5
6
7
8
9
// _reset.scss
 
html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

导入是这样导入的

1
2
3
4
5
6
7
8
/* base.scss */
 
@import 'reset';
 
body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

生成的css 是浏览器可以解析的,而且带行号,方便对比

1
2
3
4
5
6
7
8
9
html, body, ul, ol {
  margin: 0;
  padding: 0;
}
 
body {
  background-color: #efefef;
  font-size: 100% Helvetica, sans-serif;
}

sass 中的函数方法--Mixins

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

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

定义一个方法

1
2
3
4
5
6
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

使用一个方法

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

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

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

compass预处理后 生成的css如下

1
2
3
4
5
6
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

继承

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.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;
}

预处理后生成的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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

1
2
3
4
5
6
7
8
9
10
11
.container { width: 100%; }
 
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
 
aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

预处理后的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  width: 100%;
}
 
article[role="main"] {
  float: left;
  width: 62.5%;
}
 
aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

Sass 的基本语法规则的更多相关文章

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

    自从发现可编程的css语法 Sass和基于Sass的css库compass 一个给我的感觉像c# 另外一个给我的感觉像.NET Framework,一切都为了提升开发效率和降低开发大型web的门槛. ...

  2. Sass入门——简介+语法格式及编译调试

    本文来自慕课网大漠. Sass简介 Sass和SCSS区别 1.后缀名不同,很好理解 2.Sass以严格的缩进语法规则书写,不带大括号和分号:而SCSS的语法规则和CSS的语法很类似. Sass: $ ...

  3. JavaScript：声明变量名的语法规则

    一.语法规则 1.变量必须使用字母.下划线(_)或者美元符($)开始. 2.然后可以使用任意多个英文字母.数字.下划线(_)或者美元符($)组成. 3.不能使用JS关键词与保留字. 二.示例 var ...

  4. JSON 语法规则详解

    JSON 的语法规则十分简单,无论用何种方法总结都只有数条而已,它参考了 C 语言家族的一些习惯,学习起来并不会感到陌生. 回顾JSON 的五点语法 1)- 数组(Array)用方括号("[ ...

  5. JavaScript的语法规则

    JavaScript的语法规则 JavaScript区分大小写 JavaScript脚本程序须嵌入在HTML文件中 JavaScript脚本程序中不能包含HTML标记代码 每行写一条脚本语句 语句末尾 ...

  6. XML 语法规则

    转摘自:http://www.w3school.com.cn/xml/xml_elements.asp XML 语法规则 XML 文档包含 XML 元素. XML 的语法规则很简单,且很有逻辑.这些规 ...

  7. PHPCMS标签:PC标签模板语法规则

    模板语法规则1.变量表示{$name} 被解析成 <?=$name?>,表示显示变量$name的值,其中的“name”由英文字母.数字和下划线组成首字母必须是英文字母或者下划线. 2.常量 ...

  8. C++ 语法规则

    C++ 中的布尔类型:布尔类型只占用一个bit ,但是如果连续定义多个布尔类型时,编译器可能会多个布尔类型定义在一起.true  编译器用1来表示.false  编译器用0来表示. 将一个其他类型的数 ...

  9. Jenkins 定时构建语法规则

    1.Jenkins自由风格任务定时构建 2.语法规则 定时构建语法 * * * * * 第一个*表示分钟,取值0~59 第二个*表示小时,取值0~23 第三个*表示一个月的第几天,取值1~31 第四个 ...

随机推荐

  1. 字符排序（hdoj1106）

    Problem Description 输入一行数字,如果我们把这行数字中的‘5’都看成空格,那么就得到一行用空格分割的若干非负整数(可能有些整数以‘0’开头,这些头部的‘0’应该被忽略掉,除非这个整 ...

  2. CodeForces 190A Vasya and the Bus

    本题是比较简单的,有几个坑要注意一下: 1.n==0&&m!=0  时输出 "Impossible" : 2.n==0&&m==0 时输出 ”0 0 ...

  3. poj 1276 Cash Machine_多重背包

    题意:略 多重背包 #include <iostream> #include<cstring> #include<cstdio> using namespace s ...

  4. POJ 动态规划题目列表

    ]POJ 动态规划题目列表 容易: 1018, 1050, 1083, 1088, 1125, 1143, 1157, 1163, 1178, 1179, 1189, 1208, 1276, 1322 ...

  5. C++中的动态类型与动态绑定、虚函数、运行时多态的实现

    动态类型与静态类型 静态类型 是指不需要考虑表达式的执行期语义,仅分析程序文本而决定的表达式类型.静态类型仅依赖于包含表达式的程序文本的形式,而在程序运行时不会改变.通俗的讲,就是上下文无关,在编译时 ...

  6. jQuery 遍历 - siblings() 方法

    本文来自:http://www.w3school.com.cn/jquery/traversing_siblings.asp jQuery 遍历参考手册 实例 查找每个 p 元素的所有类名为 &quo ...

  7. MIN (Transact-SQL)【转】

    MIN (Transact-SQL)   其他版本 SQL Server 2005   此主题尚未评级 - 评价此主题   返回表达式中的最小值. 后面可能跟随 OVER 子句. Transact-S ...

  8. 移动web开发前准备知识了解（html5、jquery）笔记

    1.经常使用 插件工具  chrome插件:   Mobile & Tablet Emulator(用于常见移动端适配):(重点) Mobile Emulator is an useful o ...

  9. Applet 数字签名技术全然攻略

      在这里先对大家说声对不起,毕竟2年前就想写这篇文章,但由于自己太懒惰一直没有写,也是为了给自己留点东西好了,前些日子我老大让我又搞这个东西发现我曾经的资料没留,又凭着自己印象从新来过,但发现网上写 ...

  10. .net 链接ORACLE的安装包

    odp.net.ma