sass之为什么要使用预处理器
使用预处理器主要目的就是编写出可读性更好、更易于维护的css。
以sass为例,sass中提供了@import可以在sass文件中导入其他sass文件,或在选择器中按需导入所需要的某个属性样式:
@import
@import foo.scss 等同于 @import foo
@import 除了可以导入scss文件,还可以在样式表中导入某一个样式
.example { color: red; }
#main { @import "example"; } 结果:
#main .example { color: red; }
sass中还可以定义变量、嵌套选择器、定义函数、利用mixin还可以实现公共样式的复用,将常用的代码封装在mixin中,然后在内部实现按需调用。
@mixin
1、@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue, 1in); } 2、@mixin sexy-border($color, $width: 1in) {
border: { color: $color; width: $width; style: dashed; }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); } p {
border-color: blue;
border-width: 1in;
border-style: dashed; }
h1 {
border-color: blue;
border-width: 2in;
border-style: dashed; } 3、
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
} .shadows {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
} 4、
@mixin colors($text, $background, $border) {
color: $text;
background-color: $background;
border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
@include colors($values...);
} .primary {
color: #ff0000;
background-color: #00ff00;
border-color: #0000ff;
}
在多人合作开发项目的情况下,项目中使用预处理是非常有用的,将公共样式写在一个单独的文件中,每个人只需要在自己编写的sass文件顶部采用@import就
可以导入公共样式,html中也不需要再多引入一个公共的css文件,这对页面加载和渲染也是很有用的。更重要的是采用预处理器可以帮助我们写出更加易于阅读和
可维护的css。
sass学习地址:
css魔法的为什么要使用预处理器:
sass之为什么要使用预处理器的更多相关文章
- Sass:一种CSS预处理器语言
http://sass-lang.com/ Sass是一种CSS预处理器语言,通过编程方式生成CSS代码.因为可编程,所以操控灵活性自由度高,方便实现一些直接编写CSS代码较困难的代码. 同时,因为S ...
- CSS之 sass、less、stylus 预处理器的使用方式
更详细区别参考文档:https://blog.csdn.net/pedrojuliet/article/details/72887490 使用变量: sass: 使用 $ 符号定义变量,如: $ba ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
- 关于前端CSS预处理器Sass的小知识!
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- CSS预处理器Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- CSS 预处理器(框架)初探:Sass、LESS 和 Stylus
现在最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 拿less来说,可以在页面上直接使用less文件,但要引用less.js进行解析:同时也可以直接将less ...
- 为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- css的一种预处理器 sass
之前觉得关于css什么的没什么,后来让别人给问住了...然后就悲催了... sass是一种css的预处理器,是一种函数式的css的编程: 主要还是看官网 http://www.w3cplus.com/ ...
随机推荐
- Linux 服务器配置、运行、不用敲命令(新手必备!) - 宝塔全攻略建站一条龙
Linux 服务器配置.运行.不用敲命令 WordPress 建站攻略 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整 ...
- java 自带的工具
前辈说,java的基本功的好坏,一个方面要看是否能熟练使用jdk bin下的工具使用情况. 自己整理一下使用的工具. ■ javac 一个编译java的工具,进入java所在文件的路径后,javac ...
- 【spring源码分析】spring关于循环依赖的问题
引言:循环依赖就是N个类中循环嵌套引用,如果在日常开发中我们用new 对象的方式发生这种循环依赖的话程序会在运行时一直循环调用,直至内存溢出报错.下面说一下Spring是如果解决循环依赖的. 第一种: ...
- Android USB Host框架
Android 下的usb框架及功能点:https://blog.csdn.net/tianruxishui/article/details/379029591.Android framework中* ...
- showdoc 开源在线api&&技术文档管理工具
showdoc 是一个很不错的api 以及技术文档管理工具 环境准备 doker-copose 文件 version: "3" services: doc: image: regi ...
- streamdataio 实时数据分发平台
streamdataio 是一个实时的数据分发平台(当然是收费的,但是设计部分可以借鉴),我们可以通过这个平台 方便的拉取rest api 数据,或者发布数据到后端,streamdataio 可以帮助 ...
- Ubuntu遇到问题“Could not install packages due to an EnvironmentError: [Errno 13] 权限不够: ”
Ubuntu在使用一些pip的时候会遇到:“Could not install packages due to an EnvironmentError: [Errno 13] 权限不够:”的问题. 在 ...
- 无线模块 RXB12-315m TXB12-315M 应用
近期有个产品用到这对模块,因为没有什么技术支持,就直接上机调试.測试结果为带障碍发射距离60米. 下面是应用的几个知识点: 1:编程操作.事实上比較简单,调制信号315M是模块自带的,不须要调制和解调 ...
- python-廖雪峰,map/reduce学习笔记
# _*_ coding:utf-8 _*_from functools import reduce def str2int(s): digits = {'0': 0, '1': 1, '2': 2, ...
- taro 微信小程序原生作用域获取
在 Taro 的页面和组件类中,this 指向的是 Taro页面或组件实例. 但是一般我们需要获取 Taro的页面和组件 所对应的 小程序原生页面和组件实例,这个时候我们可以通过 this.$scop ...