手机触屏网站幻灯片,图片博客 wordpress,新型建筑模板设备,北京网站如何制作Sass介绍n CSS 不是一个编程语言#xff0c;可以用它来开发网页样式#xff0c;但是没有办法用它进行编程。SASS 的出现#xff0c;让 CSS 实现了通过代码编程来实现的方式。n SASS 是一种 CSS 开发工具#xff0c;提供了许多便利的写法#xff0c;让CSS 的处理实现了可编… Sass介绍n CSS 不是一个编程语言可以用它来开发网页样式但是没有办法用它进行编程。SASS 的出现让 CSS 实现了通过代码编程来实现的方式。n SASS 是一种 CSS 开发工具提供了许多便利的写法让CSS 的处理实现了可编程处理。n SASS 扩展了 CSS3增加了规则、变量、混入、选择器、继承等等特性可以生成风格良好的 CSS 样式表文件易于组织和维护。 环境搭建及编译指令n 安装 ruby(sass的依赖环境必须安装),n gem install sassruby -v gem -v gem install sass文件路径 sass -vn 自动编译命令sass文件目录 sass --watch scss文件的路径 : css文件的路径 n 编译输出格式默认情况下SASS 提供了四种格式的 CSS 输入默认情况输出是嵌套格式nested 嵌套compact 紧凑 每个选择器代码在一行expanded 扩展(完全格式化标准)compressed 压缩一行sass文件目录 sass --watch scss文件的路径 : css文件的路径 --style expandedn 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 expandedsass --watch scss/.:style --style expanded scsssass的文件夹 stylecss的文件夹 Sass-判断语句 if 指令是 SASS 中的一个控制指令用于在表达式满足条件true的时候输出指定的样式在不满足条件false或者表达式为 null 的情况下输出其他的样式if 条件 {// 当条件为真时执行的样式}同样也可以通过else if 和else 指令结合进行多条件的判断 Sass-数组/mapmap 就是列表项目中带名称的列表l $map(key1:value1, key2:value2, key3:value3)n length($map):获取 map 中的元素对个数n map-get($map, key):获取$map 中名称为 key 的值n map-keys($map):获取指定$map 中所有的 keyn map-values($map):获取指定$map 中所有的 valuen map-has-key($map, key):判断在$map 中是否包含指定的 keyn 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 start to endto 和 through 都是表示一个区间唯一的区别就是停止循环的地方不一样。$var 可以是任意一个变量名称如$istart和end是 SASS 表达式并且必须是整数 Sass-function介绍函数的功能主要是数据的运算SASS 中可以将一些值交给函数进行处理具体的处理方式由定义的函数具体的设计确定。function 函数名称(参数列表){// 数据处理} gulp介绍gulp 是前端开发过程中对代码进行构建的工具 是自动化项目的构建利器 她不仅能对网站资源进行优化而且在开发过程中很多重复的任务能够使用正确的工具自动完成大大提高我们的工作效率。 Node环境安装 NPM命令 gulp安装n npm install -g gulpn npm install —-save-dev gulp (安装到项目目录下) gulp插件安装编译/压缩/合并/代码检查/即时刷新npm install gulp-jshint gulp-concat gulp-uglify gulp-rename gulp-jshint-html-reportergulp-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-sassvar gulp require(gulp), sass require(gulp-sass);gulp.task(compile-sass, function () { gulp.src(sass/*.sass) .pipe(sass()) .pipe(gulp.dest(dist/css));}); 转载于:https://blog.51cto.com/13507333/2045931
