Sass之初识

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

SASS是最成熟的,稳定的,和在世界上强大的专业级的CSS扩展语言。

Sass Compatible

Sass的兼容性

Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries.

SASS是完全兼容所有版本的CSS。我们控制好这种兼容性,这样就可以无缝地使用任何可用的CSS库。

With either language, you can write your own mixins to help with vendor prefixes. No winner there. But you know how you don‘t go back and update the prefixes you use on all your projects? (You don‘t.) You also won‘t update your handcrafted mixins file. (Probably.)

无论是语言,你可以写你自己的混合来帮助供应商的前缀。没有赢家。但你知道你不去更新你使用你所有的项目的前缀?(你不知道)你也不会更新你的手工混合文件。(可能)。

In Sass, you can use Compass, and Compass will keep itself updated, and thus the prefix situation is handled for you. Bourbon is also good. There will be some back and forth on which of these project is "ahead."

在Sass中,你可以使用指南针,指南针会保持更新,因此前缀情况为你处理。波旁王朝也不错。将有一些来回的这些项目是“领先”。

In LESS, there are also some mixin libraries battling to be the best. They are looking a lot better these days than they have in the past. Despite their marketing-y support charts, I don‘t think they are quite as robust as the Sass versions. I‘ve been led to understand in the past that the language of LESS itself doesn‘t make it possible to build as robust of libraries on top of it. We‘ll get to some of that next.

不,也有一些混合图书馆努力成为最好的。这些天他们看起来比过去好多了。尽管他们的marketing-y支持图表,我不认为他们是很强大的放大版本。我一直在过去的理解,少本身的语言,并不能使它成为强大的库顶部的它。我们会得到一些下一个。

In both cases, the onus is on you to keep the preprocessor software itself up to date as well as these libraries. I also find that easier in Sass in general. For instance, Compass updates will just come automatically in CodeKit, or you use a Gem which is easy to update, while LESS mixins you‘ll have to manually update a file yourself.

在这两种情况下,你有责任保持前处理软件本身目前以及这些库。我还发现,容易在SASS一般。例如,指南针会自动更新来CodeKit,或者你用宝石易于更新,而不混入你必须手动更新文件自己。

LESS has an ability to do "guarded mixins." These are mixins that only take affect when a certain condition is true. Perhaps you want to set a background color based on the current text color in a module. If the text color is "pretty light" you‘ll probably want a dark background. If it‘s "pretty dark" you‘ll want a light background. So you have a single mixin broke into two parts with these guards that ensure that only one of them takes effect.

少有能力做“守卫混入。”这些都是混合的只考虑影响某个条件为真时。也许您想在模块中设置基于当前文本颜色的背景颜色。如果文本的颜色是“漂亮的光”,你可能会想要一个黑暗的背景。如果它是“非常黑暗”,你会想要一个光背景。所以你有一个单一的混合折成两部分这些警卫,确保只有一个生效。

时间: 2024-12-25 13:10:29

Sass之初识的相关文章

Sass:初识Sass与Koala工具的使用

一.下载 Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输出方式 [扩展]SASS提供四个编译风格的选项: nested:嵌套缩进的css代码,它是默认值. expanded:没有缩进的.扩展的css代码. compact:简洁格式的css代码. compressed:压缩后的css代码. 四.又到了写代码的时候啦,随便用一款文本编写工具打开demo.s

反骨仔的全文目录索引(持续整理中...)

反骨仔的全文目录索引 目录 C# 基础回顾 .NET 相关 SQL 基础梳理 其它 - 暂无分类 C# 基础回顾 C# 知识回顾 - 序列化 C# 知识回顾 - 表达式树 Expression Trees C# 知识回顾 - 特性 Attribute 走进 LINQ 的世界 进阶 - LINQ 标准查询操作概述 Linq To Objects - 如何操作文件目录 Linq To Objects - 如何操作字符串 C# 知识回顾 - 特性 Attribute 剖析 AssemblyInfo.c

反骨仔的全文目录索引

反骨仔的全文目录索引 目录 C# 基础回顾 .NET 相关 SQL 基础梳理 其它 - 暂无分类 C# 基础回顾 C# 知识回顾 - 序列化 C# 知识回顾 - 表达式树 Expression Trees C# 知识回顾 - 特性 Attribute 走进 LINQ 的世界 进阶 - LINQ 标准查询操作概述 Linq To Objects - 如何操作文件目录 Linq To Objects - 如何操作字符串 剖析 AssemblyInfo.cs - 了解常用的特性 Attribute 走

初识less sass

CSS 需要书写大量看起来没有逻辑的代码,不方便维护及扩展,不利于重复利用,特别对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因就源于 CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域)等概念. LESS .SASS在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本, 可以让我们用更少的代码做更多的事情. 关于使用的工

初识sass框架

编写过页面的开发者都知道css这个东西,究其原意,也就是层叠样式表,我们页面的三大结构,html css javascript,其中html负责主要的页面结构,css就负责主要的页面样式,而我们的js就主要负责页面的动态,在这里我们知道css是基于渲染原理,和w3c来设计标准的,对于简单的页面来说,页面内容不是很多,所以样式也就不会很多,这种情况下面编写的css样式表,也就不会显得十分的臃肿,但是如果我们卡开发的是一些比较大型的网站的话,光是页面就会有很多,加上内容和样式,你就会发现里面会有很多

IT兄弟连 HTML5教程 初识Sass Sass的作用

在了解完Sass之后,相信大多数人更期望了解它到底如何将我们编写CSS代码的效率提高的?到底是如何让我们的CSS代码更具有可维护性的?到底如何让我们编写的CSS代码更具有重用性的?那么笔者就来讲述一个Sass编码的实例,来解答这些疑问. 首先我们先拟定一个需求,让HTML中按钮有相同的大小和不同的款式,那么笔者根据这一需求,使用Sass编写出了如下代码: 首先笔者来分析一下,上述代码的具体含义.在20行以前笔者将按钮的背景色,字体颜色.按钮背景色.边框线颜色定义成了变量:在21行到25行,笔者将

IT兄弟连 HTML5教程 初识Sass Sass的使用和编译

Sass作为一门具有编程性质的CSS扩展语言,它具有独立的文件名称,因为其历史原因,它的后缀名可以有两个选择,分别为sass和scss,其中sass的编写格式不符合CSS编程语法规范,其不能使用大括号和分号,需要的严格的缩进来做定界.如下所示: body background: #eee font-size:12px p background: #0982c1 scss完全符合CSS语法,我们可以直接使用CSS语法,如下所示: body { background: #eee; font-size

IT兄弟连 HTML5教程 初识Sass Sass基本语法

本文重点在于HTML5与CSS3的学习和使用,HTML与CSS不属于编程范畴,更偏向于设计,而Sass是编程化的CSS的扩展语言,对于没有接触过编程的读者可能会有点吃力,这里不做对语法详细介绍,仅作为基本介绍,让读者了解Sass的优越性,如果对Sass感兴趣,请自行查阅相关资料. Sass基本语法 在大部分编程语言之中,其基本语法都包括这样一些东西,比如说变量.数据类型.运算符.流程控制语句.函数等,具体的这些名词都具有什么功能呢?那么笔者来依次进行介绍. 1.变量 变量,顾名思义,就是可以动态

IT兄弟连 HTML5教程 初识Sass Sass使用实例

在了解基本的Sass语法之后,那么笔者给各位读者抛出一个需求,使用Sass语法实现七色板,效果图1所示: 图1  七色板示意图 在初步了解Sass之后,可能在思路上还没有从CSS转换过来,那么笔者就带领各位读者一起来分析这个需求的特点. Ø 七色板由七种颜色组成,分别为红橙黄绿蓝灰紫 Ø 每一种颜色都是自左向右颜色逐渐加深 Ø 每一行格子有十一个 Ø 每一行的都有一个基色,并且基色的位置位于中间位置,小于基色位置则依次变浅,大于基色位置则依次加深. 既然分析出了特点或需求,那各位读者就来看看在之