Sass浅谈
对于一名前端开发来说,CSS并不陌生,几乎每天都在和CSS打交道。相处久了就会觉得CSS有些许的机械化,有些许的无趣;就会觉得写CSS很多时候都是在做一些复制粘贴性的工作,布局排版,颜色设置,边框属性,宽高取值,布局制作等等;就会觉得JQ之类的比CSS用起来顺手多了,可以设置变量、可以书写循环、可以不再机械性的写重复的代码·······
终于有一天让我遇到了Sass,让我可以用另一种方式来完成我的工作,让我不再是一个复制代码的码农,让我不再机械的进行工作,让我可以像写JQ一样为自己的样式文件设置变量书写循环,让我更有激情的完成更具意义的工作。
言归正传,开始谈下Sass。Sass是一种基于CSS的预处理语言,在CSS的基础上将代码抽象和简单化。简单的理解,Sass分为两种语法,一种是SCSS,另一种就是SASS。因为新的语法SCSS和平时使用CSS的习惯基本上一致,无须为了使用SCSS而改变以前的书写代码习惯,使得众多前端人员习喜欢使用并广为传播发扬光大(如无特别说明,本文所指的都是SCSS)。
真正的在项目中运用Sass,需要在电脑中构建好Sass的环境,包括安装Ruby环境、安装Sass、调试Sass以及编译Sass。
接着就是语法,仅Sass的语法外表看,和CSS可以说是基本一致。但若想真正的运用Sass,懂得运用CSS远远不够,首先需要熟悉Sass的基本特征:
1. 变量:用来定义变量,项目中属性值需要改变时只需改变变量值即可,不用再一个个的去改属性值。
2. 嵌套:样式和属性的嵌套,增加样式代码的可读性
3. Mixins:抽取样式定义为模块,封装好的模块可以拿来像函数那样调用,可以运用到多个页面和项目,为代码的简洁和减少冗余提供了必要的条件。
4. 选择器继承:继承选择样式
Sass为写CSS提供更多的自由,像编程语言一样,可以给你的样式定义变量,构建嵌套、增加条件判断,建立循环、赋予CSS以逻辑功能。
比如,Sass可以将颜色设置为变量,并在整个项目中重复使用他们,轻松实现多个色调的构建。复杂一点的,你可以通过Sass的mixins生成一个网格的布局功能,然后在对应的类名通过include来调用,生成所需要的网格布局。另外还可以通过extend来调用你的前面生成的类名。
诚然,具有编程特性,极大的减少CSS代码的重复性与代码的冗余,方便维护, 适应性更强,可读性更强这些都是Sass的优势。当然,优势不是说出来的,而是在代码中体验出来的。下面就选一些代码来体现这些优势:
首先是16分栏布局的(图1-1是Sass,图1-2是编译出来的CSS):
图1-1
图1-2
接着是拼合背景图片的(图2-1是Sass,图2-2是编译出来的CSS):
图2-1
图2-2
优势不言自明,看到这里估计很多前端人员都已经跃跃欲试,想在项目中运用Sass了。鉴于国内很多团队花大力气推广Sass却以流产告终,在此不得不再唠叨几句:
Sass是需要学习成本的,一个对Sass不了解或者对项目Sass库不了解的人是不能轻易去动Sass文件的,这是牵一发而动全身的,影响的可能不止一两个文件,也不止一两个项目。对项目做一个合理的规划,不要所有的sass一锅煮。指定一个拍板规划的人,避免团队合作中出现文件乱套的现象。
到这里,如果上面的准备都做足了以后,朋友们,放心大胆的开始你的Sass之旅吧!
Sass浅谈的更多相关文章
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 浅谈 Fragment 生命周期
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...
- 浅谈 LayoutInflater
浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...
- 浅谈Java的throw与throws
转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...
- 浅谈SQL注入风险 - 一个Login拿下Server
前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...
- 浅谈WebService的版本兼容性设计
在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...
- 浅谈angular2+ionic2
浅谈angular2+ionic2 前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别. 1. 项目所用:angular2+ionic2 ...
- iOS开发之浅谈MVVM的架构设计与团队协作
今天写这篇博客是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇博客的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦 ...
- Linux特殊符号浅谈
Linux特殊字符浅谈 我们经常跟键盘上面那些特殊符号比如(?.!.~...)打交道,其实在Linux有其独特的含义,大致可以分为三类:Linux特殊符号.通配符.正则表达式. Linux特殊符号又可 ...
随机推荐
- android 缓存Bitmap 使用内存缓存
private LruCache<String, Bitmap> mMemoryCache; /** * 判断内存大小 设置位图的缓存空间 */ private void judgeMem ...
- css3基础教程:CSS3弹性盒模型
今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...
- 在MAC OS X上如何启用crontab?
project: blog target: how-to-enable-crontab-on-osx.md date: 2015-12-16 status: publish tags: - OS X ...
- 命令参数解析库JCommonder
1.JCommander 是一个非常小的Java 类库,用来解析命令行参数. 2.参数类型:可以是任意类型,但我使用的只有 List,String. @Parameter(name="-s& ...
- 动手实现自己的 STL 容器 《1》---- vector
本文参考了侯捷的 <STL 源码分析>一书,出于兴趣,自行实现了简单的 vector 容器. 之后会陆续上传 list, deque 等容器的代码,若有错误,欢迎留言指出. vector ...
- RedHad中yum安装与使用
yum的安装对于linux来说,是一个福音,至少安装软件来说,非常非常方便,以前使用rpm安装,那个各种依赖,哎,说多了都是泪,现在有这个yum就方便多了. 此处记录redhad的安装.其实我也是借鉴 ...
- python数据结构与算法——图的最短路径(Dijkstra算法)
# Dijkstra算法——通过边实现松弛 # 指定一个点到其他各顶点的路径——单源最短路径 # 初始化图参数 G = {1:{1:0, 2:1, 3:12}, 2:{2:0, 3:9, 4:3}, ...
- rtabmap_ros安装---43
摘要: 原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ 一.前言 RTAB-Map (Real-Time Appearance-Based Mappin ...
- LeetCode【169. Majority Element】
Given an array of size n, find the majority element. The majority element is the element that appear ...
- 用.htaccess获取文件夹和文件名
有时需要重定向/article/1.html文件到index.php 把.htaccess放在和index.php同一个文件夹内 反向引用中的$1代表目录,$2代表去除.html后缀后的文件名 Rew ...