CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称，或其他通用名称。代替表象和晦涩难懂的名称。 应该首选具体和反映元素目的的名称，因为这些是最可以理解的，而且发生变化的可能性最小。 通用名称只是多个元素的备用名，他们兄弟元素之间是一样的，没有特别意义。区分他们，使他们具有特殊意义，通常需要为“帮手”。 尽管class(类)名和ID 的语义化对于计算...
简单地说，CSSgram是一个库能够直接在CSS中利用类似Instagram的滤镜来编辑您的照片。通过在图片上叠加颜色或渐变模拟实现滤镜，可以节省大量的图片处理时间，增加线上“玩弄”图片的乐趣。 1. 兼容性 本库主要基于 CSS Filters和 CSS Blend Modes，浏览器兼容性也主要依赖于这两个特性。 Google Chrome: 43+ Mozilla Firefox: 38+ Opera: 32+ Safari: 8+ Internet Explorer: Nope 更多兼容性信息参见Can I Use。 2.使用 ...
sass（Syntactically Awesome Style Sheets）是一个css预处理器，提供了许多便利的写法。sass坚持了DRY（don`t repeat yourself）的原则，它可以提高css的开发效率，并使css更利于维护。 1、安装 安装gulp-sass插件安装命令如下 npm install gulp-sass --save-dev 2、使用 sass有两种后缀文件名.sass和.scss 使用.sass的时候不能使用大括号，使用回车和至少两个空格来区分选择器和规则 示例： p color:#f00;...
CSS编写是前端很基础也很重要同时也是很大一部分的工作，作为前端三技术之一的CSS在前端乃至web中占据了举足轻重的地位。自从产生了div+css布局之后，CSS所扮演的角色就变得越来越重要了，当CSS3.0登上历史舞台之后，CSS似乎就变得异常火爆了，受到了前所未有的关注。 但是，CSS并不算编程语言，仅仅是一种描述型语言而已，由于编写简单，无需任何逻辑思维能力，甚至可以完全不需要编程基础就可以编写CSS代码，所以CSS从业者几乎...
Sass 学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢? Css预处理器定义了一种新的语言将Css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容，变量，结构体等功能，代码更加简洁易于维护。 那么css预处理器与Sass有什么关系呢,Sass就是属于css预处理器中的一种,还有两款他们分别是Less和 Stylus,这里就不做过多的介绍了...
这篇文章是算是前两天学习sass的一个摘要和总结吧，简单记载下。希望对大家有所帮助 对于什么是sass，我想现在大家可能都有所了解了。其实就是css的一种开发工具，或者也可以说是将css编程化。其实和less是有很大的相似点的。或者说几乎都是相同的。但是对于这两种的高级用法，其实个人更加的偏向于sass！ 关于sass的安装以及编译之类的这个东西上网一查一大把的就不多说了 我这里是用koala编译的。 下面...
Sass的数据类型可以说是一个大家庭了，其数据类型中的数字、字符串、列表、颜色和布尔型，涵盖了大多数我们的需求。但是，正如一个框架开始的演变，在这个数据类型中还缺少一个关键性的工具：关联数组。 这里创建了一个变量$objects，并且给他赋了一个列表值。 $objects: (carrot, salt, chicken); 列表可以同时定义多个数据，但他不像数组一样有对应的key，没办法来分配上下文，也没有指数来索引这些数据。所以让我们看看如...
如果你深入地使用过 Sass，那么一定会接触过 mixin。一个独立的 mixin 往往聚合了大量的控制指令来实现复杂的功能。 在本文中我们就将这些控制指令和表达式做一些讲解和实践。也许你在开发中不见得会用到它们，但是熟悉一下这些指令，可能会有意想不到的收获！ if() if() 是 Sass 的一个内建函数，与之相似的 @if 则是一个内建指令。if() 用来做条件判断并返回特定值，示例如下： @mixin test($condition) { $color: if...
翻译自sass官方文档： http://sass-lang.com/documentation/file.SASS_REFERENCE.html#css_extensions 嵌套规则 (Nested Rules) Sass 允许将一个 CSS 样式嵌套进另一个样式中，内层样式仅适用于外层样式的选择器范围内（愚人码头注：可以理解为层级选择器），例如： #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; }} 编译为： #main p { color: #00ff...
翻译自Sass官方文档： http://sass-lang.com/documentation/file.SASS_REFERENCE.html#comments Sass 支持标准的CSS多行注释以 /* */以及单行注释 //。在尽可能的情况下，多行注释会被保留在输出的CSS中，而单行注释会被删除。 例如： /* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */body { color: black; }// These comments are only one li...
格式化风格 nested 缩进嵌套css （默认的）expanded 没有缩进。扩展的csscompact 简洁格式的csscompressed 压缩之后的css 变量 $blue: #fff;使用#{} 嵌套字符串$side:left;.test{ border-#{$side}-radius:5px} 计算功能 使用 * / + - 进行计算 嵌套 原来代理div h1{ color:red;}// scss 可以这样div{ h1{ color:red; }}在嵌套里面，可以使用&引用父元素，比如 a:hover的写...
学习Sass无非就是想高效的、 面向对象编写CSS，Sass中的Interpolation #{}就是重要的一部分。开始一探究竟... 1. 简单的栗子 SCSS： @charset "UTF-8"; //不声明在ruby编译时会报错，因为下面有中文注释;$prop1: border; //一个值；@mixin set-one($side, $val){ #{$prop1}-#{$side}: $val; //#{$prop1}-$side: $val; <= 这样写编译会出现错误，记得#{$side};}.box-bor{ @include set-one(width, 2px); ...
用更合理的方式写 CSS 和 Sass 译文 GitHub 链接，欢迎各位指正。 翻译自 Airbnb CSS / Sass Styleguide 目录 术语 规则声明 我们把一个（或一组）选择器和一组属性称之为 “规则声明”。举个例子： .listing { font-size: 18px; line-height: 1.2;} 选择器 在规则声明中，“选择器” 负责选取 DOM 树中的元素，这些元素将被定义的属性所修饰。选择器可以匹配 HTML 元素，也可以匹配一...
前戏：前几篇文章其实都是些基础必备的，什么变量、继承、占位符、混合宏...这回来高级点的，玩玩 Sass自带的一些函数...有字符串函数( String Functions)、数字函数( Number Functions)、列表函数( List Functions)、颜色函数( Color Functions)、 Introspection函数( Introspection Functions)、三元函数( Miscellaneous Function) 1. 字符串函数 1.1 quote() quote($string)给 $string前后添加引号。 ...
数据类型几乎在所有编程语言当中都有，在Sass中也不例外。数据类型是根据不同的用途分的类。例如 2 是一个数值( number )，而 SitePoint 是一个字符串( string )。在这篇文章中，将涵盖Sass中所有的数据类型（共有七种数据类型），并且通过一些简单的例子来阐述这些数据类型在Sass中如何使用。 Null null 是Sass中最基本的数据类型，它既不是 true 也不是 false ，而表示的是 空 。它没有任何值。你应该知道，任何变体的 n...