绵阳梓潼网站制作公司

sass、gulp应用-创新互联

sass、gulp应用 Sass介绍

成都创新互联公司是专业的冷水江网站建设公司，冷水江接单;提供成都网站设计、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行冷水江网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

n CSS 不是一个编程语言，可以用它来开发网页样式，但是没有办法用它进行编程。SASS 的

出现，让 CSS 实现了通过代码编程来实现的方式。

n SASS 是一种 CSS 开发工具，提供了许多便利的写法，让CSS 的处理实现了可编程处理。

n SASS 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性，可以生成风格良好的 CSS 样式表文件，易于组织和维护。

sass、gulp应用 环境搭建及编译指令

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、gulp应用 Sass-变量定义

n 变量：必须是$符号开头，后面紧跟变量名，变量名称和变量值之间要使用冒号:

进行分隔（参考 CSS 属性和值的设定语法） ，如果值后面加上[!default]就表示默认值。

引用变量的值，直接使用变量名称，即可引用定义的变量的值。

n 特殊变量：一般情况下，我们定义的变量都是属性值，可以直接使用，但是如果变量作

为属性或者其他的特殊情况下，必须使用#{$variable}的形式进行调用。

sass、gulp应用 Sass-嵌套

n 选择器嵌套，在嵌套的过程中，如果需要用到父元素，在 SASS 中通过&符号引用父属性

n 嵌套属性——不常用

sass、gulp应用 Sass-mixin函数

sass 中可以通过@mixin 声明混合，可以传递参数，参数名称以$开始，多个参数之间使用

逗号分隔，@mixin 的混合代码块由@include 来调用。

n 无参数混合——不建议使用

n 有参数混合

n 多参数混合

sass、gulp应用 Sass-继承扩展--@extend

在 SASS 中，通过继承/扩展来减少重复代码，可以让一个选择器去继承另一个选择中所有

的样式。

sass、gulp应用 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  --watch scss/.:style --style expanded

scss：sass的文件夹  style：css的文件夹

sass、gulp应用 Sass-判断语句

@if 指令是 SASS 中的一个控制指令，用于在表达式满足条件（true）的时候输出指定的

样式，在不满足条件（false）或者表达式为 null 的情况下输出其他的样式

@if 条件 {

// 当条件为真时执行的样式

}

同样，也可以通过@else if 和@else 指令结合，进行多条件的判断

sass、gulp应用 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、gulp应用 Sass-循环语句
@for 指令在 SASS 中用于重复处理一组指令
有两种表现形式
l @for $var from <开始值> through <结束值>
l @for $var from  to 
to 和 through 都是表示一个区间，唯一的区别就是停止循环的地方不一样。$var 可以是
任意一个变量名称如$i，和是 SASS 表达式并且必须是整数
sass、gulp应用 Sass-function介绍
函数的功能主要是数据的运算，SASS 中可以将一些值交给函数进行处理，具体的处理方式
由定义的函数具体的设计确定。
@function 函数名称(参数列表){
// 数据处理
}
sass、gulp应用 gulp介绍
gulp 是前端开发过程中对代码进行构建的工具， 是自动化项目的构建利器； 她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；大大提高我们的工作效率。
sass、gulp应用 Node环境安装
sass、gulp应用 NPM命令
sass、gulp应用 gulp安装
n npm install -g gulp
n npm install —-save-dev gulp (安装到项目目录下)
sass、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 ： 图片压缩
sass、gulp应用 gulp使用
sass、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'));
});

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
                

                标题名称：sass、gulp应用-创新互联                

                当前URL：http://myzitong.com/article/cdphpi.html
            

        

        

            
其他资讯