大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
Sass介绍
创新互联建站专业IDC数据服务器托管提供商,专业提供成都服务器托管,服务器租用,服务器托管德阳,服务器托管德阳,成都多线服务器托管等服务器托管服务。
n CSS 不是一个编程语言,可以用它来开发网页样式,但是没有办法用它进行编程。SASS 的
出现,让 CSS 实现了通过代码编程来实现的方式。
n SASS 是一种 CSS 开发工具,提供了许多便利的写法,让CSS 的处理实现了可编程处理。
n SASS 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性,可以生成风格良好的 CSS 样式表文件,易于组织和维护。
环境搭建及编译指令
n 安装 ruby(sass的依赖环境,必须安装),
n gem install sass
ruby -v gem -v gem install sass文件路径 sass -v
n 自动编译命令
sass文件目录 sass --watch scss文件的路径 : css文件的路径
n 编译输出格式
默认情况下,SASS 提供了四种格式的 CSS 输入,默认情况输出是嵌套格式
nested 嵌套
compact 紧凑 每个选择器代码在一行
expanded 扩展(完全格式化标准)
compressed 压缩一行
sass文件目录 sass --watch scss文件的路径 : css文件的路径 --style expanded
n sass 扩展名
.sass【sass3.0-版本】
.scss【sass3.0+版本,常用】
备注:sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号;另一种就是我们这 里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分号。
在此也建议使用后缀名为 scss 的文件,以避免 sass 后缀名的严格格式要求报错。
Sass-变量定义
n 变量:必须是$符号开头,后面紧跟变量名,变量名称和变量值之间要使用冒号:
进行分隔(参考 CSS 属性和值的设定语法) ,如果值后面加上[!default]就表示默认值。
引用变量的值,直接使用变量名称,即可引用定义的变量的值。
n 特殊变量:一般情况下,我们定义的变量都是属性值,可以直接使用,但是如果变量作
为属性或者其他的特殊情况下,必须使用#{$variable}的形式进行调用。
Sass-嵌套
n 选择器嵌套,在嵌套的过程中,如果需要用到父元素,在 SASS 中通过&符号引用父属性
n 嵌套属性——不常用
Sass-mixin函数
sass 中可以通过@mixin 声明混合,可以传递参数,参数名称以$开始,多个参数之间使用
逗号分隔,@mixin 的混合代码块由@include 来调用。
n 无参数混合——不建议使用
n 有参数混合
n 多参数混合
Sass-继承扩展--@extend
在 SASS 中,通过继承/扩展来减少重复代码,可以让一个选择器去继承另一个选择中所有
的样式。
Sass-导入
n CSS 本身包含一个指令@import,但是 CSS 中的@import 每次执行都会发送一次新的请求都会消耗一定的资源
n Partials 这样的文件, 命名规范是以下划线开头的, 这样的 scss 文件不会被编译成 css
文件。
n Partials 是用来定义公共样式或者组件的样式的, 专门用于被其他的 scss 文件 import
进行使用的
n 在 SCSS 文件中引入指令@import 在引入Partials 文件时,不需要添加下划线和扩展名。
编译多个scss文件:
sass --watch . : css --style expanded
sass --watchscss/.:style --style expanded
scss:sass的文件夹 style:css的文件夹
Sass-判断语句
@if 指令是 SASS 中的一个控制指令,用于在表达式满足条件(true)的时候输出指定的
样式,在不满足条件(false)或者表达式为 null 的情况下输出其他的样式
@if 条件 {
// 当条件为真时执行的样式
}
同样,也可以通过@else if 和@else 指令结合,进行多条件的判断
Sass-数组/map
map 就是列表项目中带名称的列表
l $map:(key1:value1, key2:value2, key3:value3)
n length($map):获取 map 中的元素对个数
n map-get($map, key):获取$map 中名称为 key 的值
n map-keys($map):获取指定$map 中所有的 key
n map-values($map):获取指定$map 中所有的 value
n map-has-key($map, key):判断在$map 中是否包含指定的 key
n map-merge($map1, $map2):将$map1 和$map2 合并在一起
n map-remove($map, key):将指定名称的 key 从$map 中移除
Sass-循环语句
@for 指令在 SASS 中用于重复处理一组指令
有两种表现形式
l @for $var from <开始值> through <结束值>
l @for $var from
to 和 through 都是表示一个区间,唯一的区别就是停止循环的地方不一样。$var 可以是
任意一个变量名称如$i,
Sass-function介绍
函数的功能主要是数据的运算,SASS 中可以将一些值交给函数进行处理,具体的处理方式
由定义的函数具体的设计确定。
@function 函数名称(参数列表){
// 数据处理
}
gulp介绍
gulp 是前端开发过程中对代码进行构建的工具, 是自动化项目的构建利器; 她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;大大提高我们的工作效率。
Node环境安装
NPM命令
gulp安装
n npm install -g gulp
n npm install —-save-dev gulp (安装到项目目录下)
gulp插件安装(编译/压缩/合并/代码检查/即时刷新)
npm install gulp-jshint gulp-concat gulp-uglify gulp-rename gulp-jshint-html-reporter
gulp-imagemin --save-dev
插件介绍
gulp-jshint : 检查语法错误
gulp-concat : 合并
gulp-uglify : 压缩
gulp-rename : 重命名
gulp-jshint-html-reporter :语法错误报告
gulp-imagemin : 图片压缩
gulp使用
结合sass的使用
sass 使用 gulp-sass, 安装: npm install --save-dev gulp-sass var gulp = require('gulp'), sass = require("gulp-sass"); gulp.task('compile-sass', function () { gulp.src('sass/*.sass') .pipe(sass()) .pipe(gulp.dest('dist/css')); }); |