sass实战演练01 - 外部文件引用和变量

原创 2016年08月30日 23:18:22

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/scss 编写CSS 快速上手

CSS不是一种编程语言,它只是个配置文件,并没有生命。但我等大程序怎么能容忍自己写出来的东西不能动态变化,不能封装继承,不能xxoo呢,于是就有了css预处理的概念。这篇文章主要介绍scss的基本用法...
  • fansongy
  • fansongy
  • 2015年04月09日 19:21
  • 11263

sass @import 规则

@import 根据文件名引入。 默认情况下,它会寻找 Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import 规则: 如果文件的扩展名是 .css。如果文...

Sass变量的使用

Sass变量的使用,在变量的前面加一个”$”美元符号就可以了,如下图

sass文件的导入

css有一个特别不常用的特性,即@import规则,它允许在一个css文件中导入其他css文件。然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。 sa...

sass学习--sass的@规则(进阶篇)

主要整理了@import、@media、@extend、@at-root、@debug、@warn、@error等@规则。
  • macanfa
  • macanfa
  • 2016年06月23日 15:57
  • 1999

sass变量详解——你所不知道的sass

写在前面:现在一直使用sass写css,当初入门的时候,看的很多教程,当时看的云里雾里的,现在看来还是蛮详细的,就是一点,不够小白。本人文章类型一直比较偏小白的,想要更好的为不会用sass提供一点学习...
  • OBKoro1
  • OBKoro1
  • 2017年04月22日 14:18
  • 617

Vue-cli单文件组件引入less、sass、css样式的不同方法

vue-cli中已经内置配置好了sass 以及lass的配置。如果需要的话直接下载两个模块就可以了,webpack它会根据 lang 属性自动用适当的加载器去处理。 如果需要使用sass,则安装:...

react前后端同构渲染

前后端同构渲染:当客户端请求一个包含React组件页面的时候,服务端首先响应输出这个页面,客户端和服务端有了第一次交互。然后,如果加载组件的过程需要向服务端发出Ajax请求等,客户端和服务端又进行了一...

gulp前端自动化构建工具(四):gulp文件路径处理模块

本gulp工具的一个方法包,主要接收gulp.src()中文件对象,对文件自身所在的物理路径及其内部资源引用的路径进行处理。...

sass实战演练03 - 响应式处理(1):变量模板、mixin实战用法

css3的@media属性 @media mediatype and|not|only(media feature){ //… }举个栗子: @media screen and (ma...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:sass实战演练01 - 外部文件引用和变量
举报原因:
原因补充:

(最多只允许输入30个字)