Sass 的基本语法规则
转自: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 的基本语法规则的更多相关文章
- 学习Sass 的基本语法规则[Sass和compass学习笔记]
自从发现可编程的css语法 Sass和基于Sass的css库compass 一个给我的感觉像c# 另外一个给我的感觉像.NET Framework,一切都为了提升开发效率和降低开发大型web的门槛. ...
- Sass入门——简介+语法格式及编译调试
本文来自慕课网大漠. Sass简介 Sass和SCSS区别 1.后缀名不同,很好理解 2.Sass以严格的缩进语法规则书写,不带大括号和分号:而SCSS的语法规则和CSS的语法很类似. Sass: $ ...
- JavaScript:声明变量名的语法规则
一.语法规则 1.变量必须使用字母.下划线(_)或者美元符($)开始. 2.然后可以使用任意多个英文字母.数字.下划线(_)或者美元符($)组成. 3.不能使用JS关键词与保留字. 二.示例 var ...
- JSON 语法规则详解
JSON 的语法规则十分简单,无论用何种方法总结都只有数条而已,它参考了 C 语言家族的一些习惯,学习起来并不会感到陌生. 回顾JSON 的五点语法 1)- 数组(Array)用方括号("[ ...
- JavaScript的语法规则
JavaScript的语法规则 JavaScript区分大小写 JavaScript脚本程序须嵌入在HTML文件中 JavaScript脚本程序中不能包含HTML标记代码 每行写一条脚本语句 语句末尾 ...
- XML 语法规则
转摘自:http://www.w3school.com.cn/xml/xml_elements.asp XML 语法规则 XML 文档包含 XML 元素. XML 的语法规则很简单,且很有逻辑.这些规 ...
- PHPCMS标签:PC标签模板语法规则
模板语法规则1.变量表示{$name} 被解析成 <?=$name?>,表示显示变量$name的值,其中的“name”由英文字母.数字和下划线组成首字母必须是英文字母或者下划线. 2.常量 ...
- C++ 语法规则
C++ 中的布尔类型:布尔类型只占用一个bit ,但是如果连续定义多个布尔类型时,编译器可能会多个布尔类型定义在一起.true 编译器用1来表示.false 编译器用0来表示. 将一个其他类型的数 ...
- Jenkins 定时构建语法规则
1.Jenkins自由风格任务定时构建 2.语法规则 定时构建语法 * * * * * 第一个*表示分钟,取值0~59 第二个*表示小时,取值0~23 第三个*表示一个月的第几天,取值1~31 第四个 ...
随机推荐
- python核心编程-第四章-个人笔记
1.所有的python对象都拥有三个特性: ①身份:每个对象都有唯一的身份标识自己,可用内建函数id()来得到.基本不会用到,不用太关心 >>> a = 2 >>> ...
- Inno Setup 系统托盘图标插件 TrayIconCtrl V1.5
原文 http://restools.hanzify.org/article.asp?id=93 V1.5 修正在某些 Windows 平台上(例如 Windows XP SP3)不能正常运行的问题. ...
- CentOS6无法本地登陆,ssh远程登陆没问题
CentOS6无法本地登陆,ssh远程登陆没问题---使用CentOS自带的rsyslog分析调试 Apr 21 14:15:27 raccontroller init: tty (/dev/tty1 ...
- OpenstackUbuntu
1,create user
- 搭建PhoneCat项目的开发与测试环境
AngularJS官方网站提供了一个用于学习的示例项目:PhoneCat.这是一个Web应用,用户可以浏览一些Android手机,了解它们的详细信息,并进行搜索和排序操作. 获取源代码 PhoneCa ...
- SSAS中CUBE行权限数据级权限控制
去年做了一个数据仓库的项目,其中涉及到了CUBE数据级权限的控制.在网上找这方面的资料,找到一个[BI] 通用数据级权限控制解决方案的实现(二):Cube中的角色设置与数据级权限控制.根据这个大牛的思 ...
- 【IOS学习基础】NSObject.h学习
一.<NSObject>协议和代理模式 1.在NSObject.h头文件中,我们可以看到 // NSObject类是默认遵守<NSObject>协议的 @interface N ...
- Swift和Objective-C的差异性
1:Type Swift提供了类型推断,不需要人工的去注释变量的类型信息,编译器会通过变量的值来推断类型.例如,编译器可以自动将该变量设置为字符串: // 自动推断,不显示 var name1 = & ...
- 修复CefSharp浏览器组件中文输入Bug
概述 最近在win10上开发wpf应用,需要将CefSharp中wpf版本的浏览器组件(版本号v51.0.0)嵌入到应用中,但是发现不支持中文输入,GitHub上有这个问题的描述,参照其提到的方法可以 ...
- C++命名准则
总则:命名用英语,单词简单,明了.意义明确.过长的单词可以使用省略.一般是去掉元音字母形成省略.如果有通用的缩写,应该采用通用的缩写. 1.函数命名 1.1:全局函数:采用限定词+动词(+名词的原则) ...