css预处理器sass学习

SASS

叫做css预处理器，他的基本思想是用一门专门的编程语言来进行页面样式的设计，然后在编译成正常的css文件。

Sass的用法

安装

sass是用ruby语言写的，所以我们在安装sass之前要先安装ruby（ruby安装自行百度），执行下面命令安装：
```
  gem install sass
```
使用

sass就是普通的文本文件，后缀名为.scss。然后让我们用sass的语法写好文件之后，需要编译成.css文件才能供html文件使用（即通过link标签引入html文件），那么我们就可以使用命令行或是git工具，输入：
```
  sass test.scss test.css #假设我们的sass文件名为test
```

下面是一个具体编译sass的例子：

首先我们在文件夹中建上图这样的两个文件：.html、.scss

然后在两个文件中分别写入代码：

	<!-- html -->

	<!DOCTYPE html>

	<html>

	<head>

		<title>css预处理器sass test</title>

		<link rel="stylesheet" type="text/css" href="test.css">

	</head>

	<body>

	    <div>一个关于css预处理器sass的小练习</div>

	</body>

	</html>

	/* scss */

	$blue:red;

	div{

		color:$blue;

	}

然后我们在用git将scss代码编译成.css代码，将得到如下三个文件，其中一个就是我们需要的.css文件。

运行html将得到如下结果。

sass语法基础

变量

sass是有变量的概念的，所以的变量都以$开头。
```
  $blue:red;

  div{

  	color:$blue;

  }
```

如果变量需要嵌入在字符串中，我们就必须把他们放在#{}中。

	   $side : right;

	　　.rounded {

	　　　　border-#{$side}-radius: 5px;

	　　}

计算功能

sass允许代码中使用算式：

  $var:40;

  body {

  　　margin: (14px/2);

  　　top: 50px + 100px;

  　　right: $var * 10%;

  }

嵌套

就是我们的div及标签盒子可以嵌套设置css

  div {

  　　p {

  　　　　color:red;

  　　}

  }

属性也可以嵌套：border-color

border后面必须加冒号

	div {

	　　p {

	　　　　border: {

	　　　　　　color: red;

	　　　　}

	　　}

	}

在嵌套的代码块内，可以使用&来引用父元素，如：a:hover伪类，可写为：

	a {

	　　&:hover {

	        color: #ffb3ff;

	    }

	}

注释

和css文件注释一样 /* comment */.

代码的重用

继承

Sass允许一个选择器继承另一个选择器，使用@extend命令来实现：
Mixin

Mixin有点像C语言的宏，是可以重用的代码，使用@mixin命令来定义一个代码块，在使用@include命令来调用这个mixin，就可以实现一个代码块的重用。

mixin的强大之处，在于他可以指定参数和缺省值。

使用的时候可以根据需要加入参数

css预处理器sass学习的更多相关文章

css预处理器--sass学习（$变量名）
sass有两种形式1.scss 2.sass 一:代码的基本用法 1.变量如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中. $side : left; .rounded { border- ...
CSS预处理器Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
CSS预处理器Sass(Scss)、Less、Stylus
CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...
CSS预处理器——Sass、LESS和Stylus实践
CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...
CSS预处理器—Sass、LESS和Stylus
http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html 一.什么是CSS预处器 CSS预处理器定义了一种新的语言, ...
css预处理器 sass和stylus对比以及常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
关于前端CSS预处理器Sass的小知识！
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

随机推荐

[转载]js复制内容加版权声明代码
转自:https://www.cnblogs.com/zdz8207/p/js-oncopy.html var ua = navigator.userAgent.toLowerCase(); if( ...
unix_timestamp 和 from_unixtime 时间戳函数区别
1.unix_timestamp 将时间转化为时间戳.(date 类型数据转换成 timestamp 形式整数) 没传时间参数则取当前时间的时间戳 mysql> select unix_time ...
USB 3.0：那些你需要知道的事
在过去14年来,通用串行总线(USB)已成为计算机和外部设备之间的标准接口.不管是移动硬盘.相机.鼠标.键盘.打印机,还是扫描仪,它们和计算机之间的数据传输一般均采用USB线.USB接口也的确是“通用 ...
DRF(5) - 频率组件、url注册器、响应器、分页器
一.频率组件 1.使用DRF简单频率控制实现对用户进行访问频率控制 1)导入模块,定义频率类并继承SimpleRateThrottle # 导入模块 from rest_framework.throt ...
Andrew Ng机器学习编程作业:Neural Network Learning
作业文件: machine-learning-ex4 1. 神经网络在之前的练习中,我们已经实现了神经网络的前反馈传播算法,并且使用这个算法通过作业给的参数值预测了手写体数字.这个练习中,我们将实现 ...
C++和JAVA实例化对象的区别
JAVA: A a = new A(); 为A对象创建了一个实例,但在内存中开辟了两块空间:一块空间在堆区,存放new A()这个对象:另一块空间在堆栈,也就是栈,存放a,a的值为new A()这个对 ...
添加git忽略文件
把之前的文件添加作为忽略文件先把本地缓存删除(改变成未track状态),然后再提交git rm -r --cached .git add .git commit -m 'commit log inf ...
jquery请求数据
$(document).ready(function() { $.ajax({ url: "http://123.207.88.84:8080/zdm/AppApi/Search/Categ ...
SHELL —— grep命令+正则表达式
一什么是正则正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则. 生活中处处都是正则: 比如我们描述:4条腿你可能会想 ...
关于delphi软件运行出现Invalid floating point operation的错误的解决办法
关于delphi软件运行出现Invalid floating point operation的错误的解决办法关于delphi软件运行出现Invalid floating point operat ...