sass实战演练01 - 外部文件引用和变量
来源:互联网 发布:房产税 知乎 编辑:程序博客网 时间:2024/06/14 06:40
SASS是什么?
目前前端开发中css已经是公认的”前端程序员必须掌握”的知识,最早的css编写都是手工一条条写出来的,工作量大、不利于维护。
而sass的存在使得css开发可以像写代码一样最终生成一个正常的css文件。
我们直接开干
新建一个文件,后缀名为scss(为什么看到有的资料是.sass?)
sass有2种语法:
1.一种是以sass后缀,对代码的排版有着非常严格的要求,而且没有大括号,没有分号
2.一种是以scss后缀,更接近我们程序写法,比如大括号,分号
sass是ruby写的,但你并不需要懂ruby,另外理论上需要安装ruby(但是我们现在有了nodejs和webpack在手)
安装node-sass
npm install node-sass gulp-sass --save-dev
必须要安装,它是node调用css预编译器库的桥梁
gulp-sass依赖node-sass来进行协调编译我们的scss文件
1.编辑scss文件
global.scss 一些全局的样式
*{ margin: 0; padding: 0; font-size: 14px};
vars.scss 一些变量
$blue-font:#1b85ff;
index.scss 如何引入外部的scss、使用变量
@import "./common/global";@import "./common/vars";h1{ color: $blue-font};
2.用gulp来编译,修改gulpfile.js:
var gp = require('gulp');var sass = require("gulp-sass");gp.task("css",function(){ gp.src("./mycss/index.scss").pipe(sass()).pipe(gp.dest("./mycss/"))})
3.执行gulp任务
$ gulp css
4.查看gulp编译的index.css
* { margin: 0; padding: 0; font-size: 14px; }h1 { color: #1b85ff; }
0 0
- sass实战演练01 - 外部文件引用和变量
- sass实战演练02 - 嵌套、mixin、变量计算、颜色函数
- sass实战演练03 - 响应式处理(1):变量模板、mixin实战用法
- sass实战演练06 - 把布局拆分为12列(2):拆分和偏移
- sass实战演练07 - 做一个有逼格的table(1)
- sass实战演练08 - 做一个有逼格的table(2)
- awk引用外部变量
- awk 引用外部变量
- awk引用外部变量
- Docker常用命令和实战演练
- 有关extern关键字/引用外部文件的变量问题
- C语言引用外部变量和函数的区别
- Sass-变量和作用域
- awk如何引用外部变量
- 关于block引用外部变量
- 引用外部文件
- sass实战演练04 - 响应式处理(2):最外层container的响应式宽度写法
- 外部变量和外部函数
- AngularJS: $httpProvider.defaults.withCredentials = true;
- Android 笔记之 AsyncTask
- NodeJs火车票查询接口0830
- AsyncTask机制实现线程之间的通信
- 框架 day72 Redis入门
- sass实战演练01 - 外部文件引用和变量
- protobuf C#编译
- 事件捕获和冒泡
- Eventual Consistency & Modules in Redis
- c++复习1练习题极其代码
- LightOJ 1234 Harmonic Number 分布式打表
- 第八期 RT3052F芯片分析 《路由器就是开发板》
- [设计模式]装饰模式
- How to speed my too-slow ssh login?