写在前面 sass大约是4年前(2011年)的新技术,sass官网有详细介绍,包括安装指南.学习教程.语法细节文档等等,很全面也很清晰 为什么有必要学sass?因为很多前端自动化工具都用sass,比如京东的JDF.淘宝的KISSY都支持sass,在实际产品的开发中,sass用得很多,而且sass语法很简单,学习成本不高 至于sass与less,其实差异不是很大,功能相似,只是在语法细节上有差别.而且就功能而言,sass要略强于less,所以看看sass肯定是不亏的 一.sass是什么? 据官方说…

本文仅适用于Windows系统. 一.安装Ruby Sass是用Ruby语言写的,但是两者的语法没有关系,所以学 Sass 不用学 Ruby,只是必须先安装Ruby,然后再安装Sass. Linux和Mac已自带Ruby,不用再安装.Windows用户可以从这里下载Ruby的安装程序. 我下载的是第二个,Ruby 2.3.1 (x64) 安装过程没什么麻烦的地方,按提示来就可以. 二.安装SASS 进入运行cmd进入命令提示符,输入ruby -v查看版本号,如果能正确显示版本号,则说明ruby安…

引入 什么是sass?sass是css预处理器. 那预处理器又是什么?css本身不是一种编程语言,而预处理器是用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件. 如今主流的预处理器分Less.Sass 和 Stylus三种, 我用过的就是less和sass,less和sass有很多语法上的不同,但是最根本的不同点是less是基于javascript的,而sass是基于ruby开发的. 预处理器编译工具  鱿鱼引入提到的,sass文件最终还是要编译成正常的css文件才能为页面提…

一.sass的好处 用css画图也算是简单的实战吧,虽然用到的东西还比较少..用过之后,发现sass主要有以下优势: 可维护性.最重要的一点,可维护性的很大一部分来自变量 嗯,最简单的例子,画图总要有前景色背景色填涂色等等一堆色值吧,用css也可以完成,但如果要修改某个填涂色可能需要先审查元素找到具体色值,再对源码Ctrl + H全文替换一遍才行.用sass的话就不用这么麻烦了,简单地改下变量的值,轻松搞定,没错,根本不用审查元素找色值那么麻烦,因为好的变量名肯定是自解释的 易用性.刚刚入门用起…

sass初学入门笔记(一) 我本身是个新手,一边学sass一边记下的笔记,可能有点罗嗦,但是复习起来的话还是比较全面直观的.当然,最重要的还是去实践,实践得真理 其它 CSS 预处理器语言: CSS 预处理器技术已经非常的成熟,而且也涌现出了很多种不同的 CSS 预处理器语言,比如说: Sass(SCSS) LESS Stylus Turbine Swithch CSS CSS Cacheer DT CSS 在众多优秀的 CSS 预处理器语言中就属 Sass.LESS 和 Stylus 最优秀,…

我本身是个新手,一边学sass一边记下的笔记,可能有点罗嗦,但是复习起来的话还是比较全面直观的.当然,最重要的还是去实践,实践得真理 其它 CSS 预处理器语言: CSS 预处理器技术已经非常的成熟,而且也涌现出了很多种不同的 CSS 预处理器语言,比如说: Sass(SCSS) LESS Stylus Turbine Swithch CSS CSS Cacheer DT CSS 在众多优秀的 CSS 预处理器语言中就属 Sass.LESS 和 Stylus 最优秀,讨论的也多,对比的也多.  …

好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn.carousel = function(options) { )return false; var opts = $.extend({},$.fn.carousel.defaults,options); function Slide(o){ this.o = o; this.box = o.fin…

6.全局变量 sass暂时没有局部变量 局部定义变量会覆盖全局变量 新出!global 不过要sass 3.4版本以后        (这句呢,,我觉得是错的 开始写的时候没测试 现在发现我觉得他是有局部作用域的 具体明天问作者~ 我已经加群提问题了) 例: $font-size:12px; 设置全局 body { $font-size:14px: //覆盖掉了全局 font-size:$font-size //14 } p { font-size:$font-size; //14 这个我觉得是…

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L…

本文来自阮一峰http://www.ruanyifeng.com/blog/2012/06/sass.html 学过CSS的人都知道,它不是一种编程语言. 你可以用它开发网页样式,但是没法用它编程.也就是说,CSS基本上是设计师的工具,不是程序员的工具.在程序员眼里,CSS是一件很麻烦的东西.它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事. 很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preprocessor).它的基本思想是,用一种…