SASS初学者入门（转）

http://rd.189works.com/article-108018-1.html

Sass 是什么？

Sass 是Syntactically Awesome Stylesheete Sass的缩写，是由Hampton Catlin开发的。

Sass可以简化你的Css工作流，并可以使你的Css的扩展和维护工作变的更加容易！

例如，曾几时何，因为客户的需求的变更，你必须不断的通过查找和替换来更改一个像素值，或者，为了能够确定多栏布局中某一栏的宽度，你需要使用计算像素值软件才能搞定。

Sass引入了一些新的概念如，变量，混合，嵌套和选择器继承。

Sass看起来似乎和css很像，但它没有分号和大括号。

以下是css的表示：

#skyscraper_ad
{  display: block;  width: 120px;  height: 600px;
}
#leaderboard_ad
{  display: block;  width: 728px;  height: 90px;
}

在sass中将会这样写：

#skyscraper_ad  display: block width: 120px height: 600px #leaderboard_ad   display: block width: 728px height: 90px

Sass用两个空格缩进来定义代码的嵌套。

通过以上的展示，你已经了解了Sass怎么书写，接下来看一下一些让sass变的如此神奇的一些东西。

变量

$red: #FF4848

在Sass中，可以使用像darken和lighten函数来修改变量值。

在下面的例子中，p标签中的red将会比h1中的red更深。

$red: #FF4848
$fontsize: 12px
h1 color: $red p  color: darken($red, 10%)

你能够运用‘加’或‘减’操作符来对相同类型的变量进行运算，如果我们想要手动的轻微的加深一个颜色值，可以通过'-'来减去#101，同样我们可以通过‘+’来将字体值增大10px。

p.addition_and_subtraction  color: $red - #101 font-size: $fontsize + 10px

嵌套

嵌套可以分为两种类型：

选择器嵌套

选择器嵌套是第一种类型嵌套。

sass中的嵌套和html中的嵌套是相似的。

$fontsize: 12px .speaker  .name  font:  weight: bold size: $fontsize + 10px .position  font:  size: $fontsize

如果你看一下编译后生成的css，你将会看见嵌套的.speaker类下的.name类生成的css选择器：.speaker .name。

.speaker .name {  font-weight: bold;  font-size: 22px; }
.speaker .position {  font-size: 12px; }

属性嵌套

“属性嵌套”是第二种类型的嵌套。

你可以嵌套带有相同前缀的属性。

$fontsize: 12px
.speaker  .name  font:  weight: bold size: $fontsize + 10px .position  font:  size: $fontsize

转载于:https://www.cnblogs.com/JoannaQ/archive/2013/03/20/2970407.html

SASS初学者入门（转）相关推荐

css预处理器sass/scss入门
sass/scss入门一.css预处理器是什么? 二.为什么要用css预处理器? 三.sass.less.stylus的区别? 四.sass与scss 五.sass安装六.sass常见用法 6.1 ...
Node初学者入门，一本全面的NodeJS教程，微小的web框架，能实现文件上传功能以及数据解析功能...
Node初学者入门,一本全面的NodeJS教程转载于:https://www.cnblogs.com/hfultrastrong/p/8036672.html
首发：适合初学者入门人工智能的路线及资料下载
本文为AI入门提供了一个简易的学习路线,并提供了代码和数据集下载.(黄海广) 一.前言 AI以及机器学习入门,初学者遇到的问题非常多,但最大的问题就是: 资料太多!!!看不完!!!不知道如何取舍!!! ...
用python公众号开书城步骤_资源 | 开放Python书籍：一本短小精悍的初学者入门指南...
资源 | 开放Python书籍:一本短小精悍的初学者入门指南作者:机器之心来源:机器之心公众号分享到: 03-25 选自GitHub机器之心整理参与:思源如何快速熟悉 Python 编程一 ...
oracle打patch,Oracle初学者入门指南-How to get Oracle Patch?
Oracle初学者入门指南-How to get Oracle Patch? 怎样获得/找到Oracle的Patch,这是一个朋友在Itpub上问到的问题.他还举了一个生动的例子: 比如我要使用ora ...
c语言中数组名可以与其他变量名相同,C语言初学者入门讲座第九讲数组（1）...
C语言初学者入门讲座第九讲数组(1) (2007-01-17 11:39:19) 数组在程序设计中,为了处理方便,把具有相同类型的若干变量按有序的形式组织起来.这些按序排列的同类数据元素的集合称为 ...
Python适合初学者入门
老袁最近发现,我身边有好多小伙伴最近老问我学习python怎么样,这期就出的相信点解析一下为什么初学者适合python,希望大家可以对python感兴趣程度大一些. Python适合初学者入门.Pyt ...
JavaScript_牛客网_编程初学者入门训练（21-30题解）
牛客网编程初学者入门训练题解JavaScript版本编程初学者入门训练第21-30题解答(js) 22.你能活多少秒 25.计算体重指数 26.计算三角形的周长和面积 27.计算球体体积 28.大小 ...
初学者对PHP的总结,PHP_献给php初学者(入门学习经验谈)，1.概要：学习任何语言都需要 - phpStudy...
献给php初学者(入门学习经验谈) 1.概要:学习任何语言都需要多看多想多写多问!!写编程是一种熟能生巧的东西!因为知识就那么多,你看多了就会觉得怎么都一样. 程序员就是炒冷饭的,一遍又一遍. ...

SASS初学者入门（转）

SASS初学者入门（转）相关推荐

最新文章

热门文章