sass简介.pdf

1 6 sass 简介 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 2 6 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 3 6 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 4 6 从以上的例子中可以看出 我们让 font 另起一行 并且给了两个空格的缩进 然后 就可以设置原来带连字符的属性了 所以当我们以上面的格式书写 font 的属性 weight 时 这种格式会自动生成 css 属性 font weight speaker name font weight bold font size 22px speaker position font size 12px 所有带连字符的选择器都支持以上格式 像这种类型的嵌套对于你组织和结构化你的 css 是一种神奇的方法 同时 它还可以减少没有必要的代码重复 混合 混合是另一种让人着迷的 Sass 特性 混合能够使你重用一整段 Sass 代码 你甚至能够给他们传递参数 同时 你还能够确定默认的值 这也是十分酷的 定义一个混合 需要用到 mixin 关键字 后面跟上你为混合选择的名字 如果你需要一些参数 在名字后面 添加一对括 号 并在括号中定义你的参数变量 如果你需要默认值 可以再参数后面添加冒号和你想要的默认值 使用混合是容易的 通过调用 includSass 关键字 后面跟着混合名和用括号包含的参数值 下面是例子 mixin border radius amount 5px moz border radius amount webkit border radius amount border radius amount h1 include border radius 2px speaker include border radius 上面的 Sass 将会编译生成如下的 css h1 moz border radius 2px 5 6 webkit border radius 2px border radius 2x speaker moz border radius 5px webkit border radius 5px border radius 5px 在以上例子中 我们给 h1 中的 radius 中设定了值 而 speakr 中 因为没有设定值 所以 radius 中的值为默认值 We specified the radius inh1 but for the speakerwe didn t specify anything therefore the default of5pxis used 选择器继承 选择器继承能够让你实现选择器可以继承其他选择器中的所有样式 这也是让人欲罢不能的 为了能够实现它 需要使用 extend 关键字 后面跟着你想要继承的选择器 这样 想要继承的选择器中的样式都会在被继 承选择器中实现 h1 border 4px solid ff9aa9 speaker extend h1 border width 2px 上面的将会编译为如下的 css h1 speaker border 4px solid ff9aa9 speaker border width 2px 尝试一下 sass 通过在线的方式尝试一下 你能体验 Sass 通过 try Sass online 不需要将 Sass 安装在你本地电脑 在编译以前 你需要选择底部的缩进语法 6 6 安装使用 Sass 是一个 Ruby gem 假如以前你的机子中装有 Ruby gem 很容易在机子中安装 Sass Sass 能被用作为一个命令行工具 将你的 Sass 文件编译成 css 文件 你能做这个通过定义 Sass 类型 监控 sass 文件夹 样式列表 文件夹中包含着 sass 文件夹和样式列表文件夹 sass 文件夹中包含的 sass 文件后缀名必须为 sass 样式列表文件夹中包含的是你的输