sass技术文档资料.pptVIP

SASS应用 SASS使用背景 CSS 是一些非常基础简单的语句的组合，既然简单的语句，就不可避免的有很多重复，冗余的东西。而且没有传统编程语言变量、控制语句等高级特性，所以造成了 CSS 编写低效，往往需要通过查找替换、大量复制来修改或者编写。 Sass 就是用来弥补这个缺陷，为 CSS 提供额外的高级功能，使其开发更加方便快捷，更加方便管理。所以你需要使用 Sass 的语法来编写代码，然后通过 Sass 编译成具体的 CSS 代码，然后使用。 所以这里就需要学习一下 Sass 的语法。 Sass 的语法是按照一定规则进行缩进然后编写有关 CSS 属性，与传统 CSS 代码差别较大，学习成本高，于是 Sass 就有了一套 Scss 语法规则。Scss 中你可以直接写 CSS，即便你不会 Sass 的语法特性，直接编写 CSS 代码也是可以通过编译的，你只需要保存成 .scss 后缀的文件名即可。 Sass是一种CSS预处理语言，当你使用Sass这门语言时，你使用编译程序来转换Sass文件，通常以SCSS文件格式书写然后转换成CSS文件. SASS简介 Sass通过使用命令行工作。 在它做任何事情前必须先安装Ruby，然后安装SASS。也可使用可视化界面的GUI工具来书写Sass。 可视化工具：Codekit, Prepro, Mixture, Koala, compass. 开始使用SASS 在开始之前，确保ruby和sass已安装。 创建如下目录： project —sass —style.scss —css index.html SASS提供四个编译风格的选项： nested： 嵌套缩进的CSS代码，它是默认值。 expanded：没有缩进的，扩展的CSS代码。 compact：简洁格式的CSS代码。 compressed：压缩后的CSS代码。 设置项目 进入project目录，命令行中输入：sass —style compressed style.scss style.css 设置编译风格，输入sass —watch sass:css 监听某个文件或目录，一旦文件有变动，就自动生成编译后的版本。html文件中只需简单引入css文件即可。 SASS变量 定义方法：$name:value 使用方式： 作为css名称的一部分：#{$name} 作为属性值：$name 例： $i: 1; $padding-value: 10px; .#{$i} { padding: $padding-value; } SASS宏：@mixin 不带参数宏定义：@mixin name {} 带参数宏定义：@mixin name($param1,[…]){} 功能：使用宏，可以避免编写重复代码，一次编写，多次使用。 例： @mixin rounded($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } 调用方式： a { display:block; width: 10px;height: 10px; @include rounded(5px); } SASS嵌套 html元素结构： nava href=#首页/a a href=#绅蓝移动办公/a a href=#绅蓝移动医疗/a a href=#关于我们/a/nav SASS样式嵌套控制： nav { a { display: inline-block; text-decoration: none; color: $font-color; margin-left: 20px; :hover { color: darken($blue-light, 10%); }}} Sass 的数据类型 Sass 进阶 Sass 中主要有六种数据类型： 数字型 (e.g. 1.2, 13, 10px) 文本型，单引号、双引号或者不加都可以 (e.g. foo, bar, baz) 颜色值类型 (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5)) 布尔值 (e.g. true, false) nulls (e.g. null) 值列表，通过空格或者逗号分割值 (e.g. 1.5em 1em 0 2em,Helvetica,