自从走进前端圈，一直忙于学习和工作，虽有经常记下点滴收获，却没有时间好好地写出来。此刻，恰逢"五一"，正好挤时间写写博客，跟大家分享下近期结合使用Sass和Compass的一些经验。文章主要面向对Sass和Compass还不太熟悉的同学，相信对你有一定的帮助。大牛请补充，欢迎留下建议或补充说明。 Sass 和 Compass 的安装 Sass和Compass的安装大家可以参考它们各自的官网，里面有详细的install步骤。以下是它们的官网： ...
预计阅读时间: 5 分钟 介绍 less官网 http://lesscss.org/ sass官网 http://sass-lang.com/ 可以命令行安装也可以直接下载，其中less可以通过Nodejs的npm包管理去下载管理，sass则需要ruby去下载安装。 通过命令行，npm安装less npm install -g less Less知识点 Variables变量定义 Nested Rules嵌套规则（&代表当前元素的父元素） Operations算数表达式 Functions函数 Scop...
是的，我又用上 sass 了，新公司在用，所以就又写 sass 了。 然后今天遇到的小问题，随手记一下 当我们用 sass 写如下代码的时候 .class{ $padding: 5px; width: calc(100% - $paddding * 2);} 嗯嗯，看上去好像很正常。。。 错！！ 编译完了之后，你会发现这段代码是这样的 .class{ width: calc(100% - $padding * 2);} 然后浏览器就无情的忽略掉这一行谜一样的样式了 这尼玛是什么呀？！ 摔！ ...
网易的同事整理了一套在移动端使用雪碧图的近乎完美解决方案，特此整理，方便日后使用。 推导过程 注重原理的同学可以看看 柏林大牛的文章,里面有详细的推导过程。我就不再重复了。 使用方法 首先需要配合移动端适配的rem来： /*移动端适配 width|height|font-size = 视觉稿量出来的值 / 100rem;@lbl*/@media screen and (max-width:359px) and (min-width:320px) { html,body{ ...
一、什么是SASS SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。 本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。 二、安装和使用 2.1 安装 SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。 假定你已经安装好了Ruby，接着在命令行输入下面的命令：...
解读bootstrap v4 sass设计 首先关于bootstrap从v3的less转到v4的sass的十万个为什么，这里暂且不表（计划会另起一篇文章对比less，sass，postcss）。 其次本篇文章主要围绕下面几个目标展开： 了解bootstrap 4整个sass的设计 如何使用并修改bootstrap v4的样式 如何改进bootstrap的sass设计 最后不深入具体代码的实现细节，只从整体架构上分析 一起走进bootstrap v4 sass 1、bootstrap的...
Sass 是 CSS 的扩展，增加了嵌套规则，变量，混入功能等很多更多。它简化了组织和维护 CSS 代码的成本。Compass 是一个开源的 CSS 框架，使得使用 CSS3 和流行的设计模式比以往任何时候都更容易。在这篇文章中，我们已经收集了一组有用的 Sass 和 Compass 工具，将帮助您快速构建 Web 应用程序。 您可能感兴趣的相关文章网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & Jav...
sass和scss的区别 sass是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，scss和css写法比较相似 Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8 sass覆盖默认变量值是在他之前重新声明变量值（！default） 混合宏：@mixin font（当需要使用变量的时候用） @include font Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混...
大图：
Sass (Syntactically Awesome StyleSheets) Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时。 CSS预处理器，重量级底层，有强大的库。 基于Ruby。官网： http://sass-lang.com/ 国内： http://www.w3cplus.com/sassguide/安装： ...
*:first-child {margin-top: 0 !important; }body>*:last-child {margin-bottom: 0 !important; }/* BLOCKS =============================================================================*/p, blockquote, ul, ol, dl, table, pre {margin: 15px 0; }/* HEADERS =============================================================================*/h1, h2, h3, h4, h5, h6 {margin: 20px 0 10px;padding: 0;font-weight: bold;-...
最近开始学习并且使用，发现使用它写起css来真的是各种爽安装sass，compasssass是依赖于ruby的，必须先安装Ruby，点击下载 下载完ruby之后，使用命令行安装sass gem install sass 使用命令，sass-v compass-v 查看是否安装成功出现上图情况则为安装成功sass的使用及优点sass官网： http://www.w3cplus.com/sassguide/ api文档 http://sass-lang.com/documentation/file.SASS_REFERENCE.html sass功能：定义变量,数值...
简单用法： 变量 sass中可以定义变量，方便统一修改和维护。//sass style $fontStack: Helvetica, sans-serif; $primaryColor: #333; body {font-family: $fontStack;color: $primaryColor; } //css stylebody {font-family: Helvetica,sans-serif; color: #333; } 嵌套 sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。//sass style nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }...
@if @if 指令是一个SassScript,它可以根据条件处理样式块，如果条件为true返回一个样式块，反之 false 返回另一个样式块，在Sass 中除了@if之，还可以配合@else if和eles 一起。 例如： //SCSS @mixin blockOrHidden($boolean:true){ @if $boolean { @debug "$boolean is #{$boolean}"; displ...
join() 函数 join()函数是将两个列表连接合并成一个列表。 >>join(10px 20px, 30px 40px) (10px 20px 20px 40px) >>join((blue,red),(#abc,#def)) (#0000ff,#ff0000,#aabbcc,#ddeeff) 不过join()只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错 将多个join（）函数合并在一起使用 >>join((blue red),join((#abc #def),(#dee #eff))) (#00...