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; }

sass实战演练01 - 外部文件引用和变量的更多相关文章

  1. Google Colab Notebook 的外部文件引用配置

    Google Colab Notebook 的外部文件引用配置 Reference: How to upload the file and read Google Colab 先装工具:google- ...

  2. postman引用外部文件中的变量和数据

    接口参数显示: 点击collections下文件夹test0424右边的箭头,点击run按钮: DataFile导入txt文件: 预览文件数据: 运行,成功:

  3. 有用的javascript外部文件或其他外部文件引用

    1.<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/ ...

  4. Perl调用和管理外部文件中的变量(如软件和数据库配置文件)

    编写流程时,有一个好的习惯是将流程需要调用的软件.数据库等信息与脚本进行分离,这样可以统一管理流程的软件和数据库等信息,当它们路径改变或者升级的时候管理起来就很方便,而不需要去脚本中一个个寻找再修改. ...

  5. 解决HTML加载时,外部js文件引用较多,影响页面打开速度问题

    解决HTML加载时,外部js文件引用较多,影响页面打开速度问题   通常HTML文件在浏览器中加载时,浏览器都会按照<script>元素在页面中出现的先后顺序,对它们依次加载,一旦加载的j ...

  6. Django模板变量,过滤器和静态文件引用

    模版路径查找 首先去settings.py里面找TEMPLATES ,在TEMPLATES下面找DIRS,找到就返回,没找到就继续往下,如果APP_DIRS设置为为Ture,那么就会到上面 INSTA ...

  7. MyBatis mapper文件中的变量引用方式#{}与${}的差别

    MyBatis mapper文件中的变量引用方式#{}与${}的差别 #{},和 ${}传参的区别如下:使用#传入参数是,sql语句解析是会加上"",当成字符串来解析,这样相比于$ ...

  8. [DB][mybatis]MyBatis mapper文件引用变量#{}与${}差异

    MyBatis mapper文件引用变量#{}与${}差异 默认,使用#{}语法,MyBatis会产生PreparedStatement中.而且安全的设置PreparedStatement參数,这个过 ...

  9. Spring(二)--FactoryBean、bean的后置处理器、数据库连接池、引用外部文件、使用注解配置bean等

    实验1:配置通过静态工厂方法创建的bean  [通过静态方法提供实例对象,工厂类本身不需要实例化!] 1.创建静态工厂类 public class StaticFactory { private st ...

随机推荐

  1. dspmq dspmqver command not found(dspmq命令找不到,dspmqver主安装目录设置不正确

    [root@rhv6-64b ~]# su - mqm -bash-4.1$ dspmq -bash: dspmq: command not found(dspmq命令找不到) -bash-4.1$ ...

  2. vue todolist待办事项完整

    <template> <div id="app"> <input type="text" v-model='todo' @keyd ...

  3. 跨域验证cookie与缓存控制

    1. 是否能跨域完全取决于浏览器控制,浏览器可以直接拒绝发送跨域请求(服务器根本收不到),也可以发送给服务器等接收到返回信息后决定是否让它被读取. 2. 服务器并不能辨别请求是从哪个源发过来的,只有在 ...

  4. 搭建postgresql集群的问题汇总

    问题一:如何配置pg远程访问          修改postgresql.conf-->listen_addresses = '*'          修改pg_hba.conf-->添加 ...

  5. IDEA配置打可运行jar包

    IDEA打包可以运行的jar包大体有两种方式:一种是比较方便的配置maven:一种是直接配置IDEA采用Build Artifacts打包. 配置maven打包,在pom.xml里面配置build插件 ...

  6. /dev/null 2>&1 解释

    cmd >a 2>a 和 cmd >a 2>&1 为什么不同?cmd >a 2>a :stdout和stderr都直接送往文件 a ,a文件会被打开两遍,由 ...

  7. C# 中使用锁防止多线程冲突

    在编程的时候经常会用到多线程,有时候如果多线程操作同一个资源就会导致冲突,.NET提供了多种方法来防止冲突发生,这里讲下Mutex 该类位于System.Threading命名空间,常用的方式是这样: ...

  8. webpack 配置案例for angular babel

    1.dev.js: const webpack = require('webpack'); const webpackUglifyJsPlugin = require('webpack-uglify- ...

  9. python多进程与服务器并发

    进程 什么是进程 进程:正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 进程与程序的区别 程序仅仅只是一堆代码而已,而进程指的是程序的运行过程. 并发与并行 无论是并行还是并发,在用户看 ...

  10. CS229 6.6 Neurons Networks PCA主成分分析

    主成分分析(PCA)是一种经典的降维算法,基于基变换,数据原来位于标准坐标基下,将其投影到前k个最大特征值对应的特征向量所组成的基上,使得数据在新基各个维度有最大的方差,且在新基的各个维度上数据是不相 ...