Sass和gulp的简单了解
sass里面有2种语法 第一种语法是sass 后缀名必须是sass 第二种语法是scss 后缀名必须是scss
//scss写法
$width:300px;
$height:400px;
body{
width:$width;
height:$height;
}
//sass写法
$with:100px;
$height:100px;
body
width:$width
sass的基本语法
1、定义变量 必须要用$
2、变量拼接 #{变量}
3、sass监听 sass --watch 文件名称:文件名称
4、文件编译非风格
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
sass --watch --style compact 文件名:文件名
5、sass里面的语法支持运算
6、sass语法支持嵌套形式 但是最好不要超过3层
7、&代表父级
8、继承 @extend
9、混合宏 当需要写一些重复的代码的时候 我们可以把代码放在混合宏中
如何定义混合宏 @mixin 变量名(){}
如何调用混合宏 @include 变量名
10、引入公共文件 @import 文件的名称 不需要加_
在建立文件的时候 _文件名称
11、注释
单行注释 //
多行注释 /* */
不能用中文
1 10 10
12、@for 变量 from 值 through 值
1 10 9
@for 变量 from 值 to 值
13、@if
14、@function
15、如果sass里面涉及到了运算的时候 - 两边一定要加空格
1、开发阶段
//安装淘宝镜像:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
//安装插件:npm install gulp -babel -D
Sass和gulp的简单了解的更多相关文章
- Gulp.js - 简单、直观的自动化项目构建工具
Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...
- sass mapsource --->gulp
详细,请戳这里 1.安装插件 npm install --save-dev gulp-sass gulp-sourcemaps gulp-autoprefixer 如果安装错误,请用sudo 权限: ...
- 設定 Bootstrap/SASS/Bower/gulp (Windows平台)
請注意:在進行以下步驟前,你會需要先安裝git,可以參考這篇 git安裝教學 前言 時至今日,幾乎每個人都在討論bootstrap.less 或 sass.我們知道它們是比較新的前端技術,而且有開始愈 ...
- webpack gulp grunt 简单介绍
本文主要是讲下webpack的相关知识点,理论比较多,因为webpack的功能非常强大,说到的也基本都是经常用到的. 这三个工具都属于前端自动化的工具,都是第三方的,并且国内很多大型团队也都有自己成熟 ...
- 利用gulp搭建简单服务器,gulp标准版
var gulp = require('gulp'), autoprefixer = require('gulp-autoprefixer'), //自动添加css前缀 rename = requir ...
- Gulp的简单使用
我比较喜欢使用Gulp,因为简单好用! 今天的任务是:使用Gulp来压缩 jQuery源码,各输出一个压缩的和未压缩的版本 第一步:安装 cnpm install gulp --save-dev cn ...
- gulp的简单打包示例(一)
引言 前端开发,打包工具是必不可少的,虽然有很多别人帮你封装好的打包工具,但自己配置一个,自身的实力也会大增呀.这篇博文主要讲的是使用gulp对html.js.less.css.图片的压缩合并等配置. ...
- gulp.js简单操作
一.安装gulp 1.深入设置任务之前,需先安装gulp: $ npm install gulp -g 2.这会将gulp安装到全域环境下,让你可以存取gulp的CLI.接著,需要在本地端的专案进行安 ...
- 自动化构建工具—gulp的简单配置
把之前用到的gulp总结整理下,有时候说不出来的,就写出来吧,做个笔记,以后也可以慢慢补充 cnpm i --save-dev gulp 把nodejs模块写到package.json配置文件中,当保 ...
随机推荐
- 消息中间件 | 消息协议 | AMQP -- 《分布式 消息中间件实践》笔记
04年,AMQP开放标准被开发 06年,AMQP规范被发布 基本概念 Message:与平台无相关的数据. Publisher:向交换器发布消息的客户端应用程序 Excha ...
- 原生Ajax实现
发现一件可怕的事情,前端学不完了,春招要开始了.唉,人生苦短.
- JS精粹知识点和我的解释
函数若是不return则默认返回undefined const value=()=>{ let a=3; } let value_test; console.log(value(),value_ ...
- Luogu P4901 排队 fib数列+树状数组+倍增
这题让我升华..还好只重构了一遍 首先我们发现:$n$较小时,整个队伍的形态 跟 $n$ 比较大时的局部是一样的 所以我们预处理出这个队伍的形态,和每一行每个位置的质因子个数的前缀和,$O(nlogn ...
- python - OS(一)获取绝对路径
目录结构 python常用模块(文件夹) python_os(文件夹) os_获取绝对路径.py 方法一 os_获取绝对路径.py #coding:utf8 import os #获取当前目录绝对路径 ...
- vim 编辑器设置tab缩进
创建 ~/.vimrc文件,写入 set tabstop=4 ,保存 原文
- UnityVR Steam_VR开发工具插件---VRTK 自带案例分析
- Hadoop实战:reduce端实现Join
项目描述 现在假设有两个数据集:气象站数据库和天气记录数据库,并考虑如何合二为一.一个典型的查询是:输出气象站的历史信息,同时各行记录也包含气象站的元数据信息. 气象站和天气记录合并之后的示意图如下所 ...
- 还不知道如何使用 IDEA ?教你三招快速掌握 IDEA
前言 IntelliJ IDEA 是一个非常强大的 IDE,拥有许多功能.在 IDEA 中大部分功能都可以用快捷键去完成,如果掌握了大部分快捷键,可以只使用键盘开发了. ps: 最近正在练习快捷键,准 ...
- PHPGGC学习----实践
本文首发于先知:https://xz.aliyun.com/t/5450 PHPGGC学习----理论部分对PHPGGC工具的使用方法有了一个基本的了解,接下来需要利用实践环境进行一个实践操作,巩固一 ...