SASS

SASS

SASS

128 文章 51 话题 1350 浏览

Sass Guidelines 中文版本之 循环、排错和工具

本文是 Sass Guidelines 中文版本最后一篇,在这篇文章中主要涵盖了 Sass 中的循环处理、排错以及工具方面的使用。并且对整个指南做了一个最终总结。 循环 因为 Sass 提供了如 lists 和 maps 这样的复杂数据结构,所以对于提供给开发者遍历这些数据结构的能力也无需惊讶。 然而,循环的出现意味着存在本不可能出现在Sass中的复杂逻辑。在使用循环之前,务必确定这么做是有道理的…

清晨说ぺ晚安 2022-01-05 浏览 981 评论 0 收藏 0

Sass Guidelines 中文版本之 变量、扩展、混合宏

Sass Guidelines 已经整理发布了五个部分,从其相关信息、简介、命名约定与注释、项目文件管理到第五部分的响应式设计与断点管理,作者都做出相关总结与推荐性建议。这篇文章是其第六个部分,主要涵盖了Sass中的变量、扩展、混合宏和控制指令等相关的知识,希望大家会喜欢。 变量 变量是任何编程语言的精髓。变量让值得以重用,避免了一遍遍地复制副本。最重要的是,使用变量让更新一个值变得很方便。不用查…

想挽留 2022-01-04 浏览 991 评论 0 收藏 0

Sass Guidelines 中文版本之 响应式设计和断点管理

响应式设计已不是新的课题,那么 Sass Guidelines 中为什么也会着重花一节内容来介绍响应式与断点管理相关的内容呢?记得前段时间坛子里在讨论,媒体查询在Sass中应该是嵌套在选择器中使用,还是单独提取出来使用?如果嵌套使用,编译出来会有很多个媒体查询,那么如此一来会不会影响页面等等。那么这一节中,也主要介绍这方面的,而作者更趋向于在选择器的嵌套中来写媒体查询。 响应式设计和断点 无需在此…

浮生未歇 2022-01-03 浏览 970 评论 0 收藏 0

Sass @mixin 和 @extend 该如何选择

Mixins 允许我们在项目中复用样式片段,可以传递参数这个特性使得它们非常灵活,强大。同样,我们也可以使用 @extend 命令让一个选择器继承其它选择器去复用样式片段。有的时候 Mixin和 extend 好像做了同样的事情,那我们应该选择哪一个呢? 这个问题我会在本文的最后给出答案。在这之前,我先谈一谈关于@mixin指令的一些事情。 除了传递参数,我想让你知道如何给一个mixin传递CSS…

虐人心 2022-01-02 浏览 797 评论 0 收藏 0

Sass 的自意识混合宏

几天前的一个晚上,我在 Up Front Berlin 上就过去几年 Sass 的某些特性谈了谈自己的使用方法。点击这里可以查看当时的幻灯片。但就我个人而言,更乐意发表几篇笔记,深入地探讨相关的问题——本文就取材自这些笔记中的一些片段。 我所探讨的焦点在 map 这种数据类型上,特别是使用 @content,@at-root 和 unique-id() 等指令合并 maps 所实现的奇妙方法。其中…

清晨说ぺ晚安 2022-01-01 浏览 818 评论 0 收藏 0

使用 Foundation5 和 Sass 制作语义化模板

  • 使用 Foundation5 和 Sass 制作语义化模板
  • 使用 Foundation5 和 Sass 制作语义化模板
  • 使用 Foundation5 和 Sass 制作语义化模板
  • 使用 Foundation5 和 Sass 制作语义化模板

我将继续深入到 Foundation 的基础栅格结构。这就是说,我将给你展示如何利用它预建立的Sass mixins来做出更多语义化栅格。为了说明它,我将重建上述文章中的demo页面。首先,请先让我介绍一下在这篇文章将要使用到的项目。 项目结构 通过使用Foundation的命令行窗口,我建立了一个Compass项目。它的结构如下: 注意以下文件夹: 文件名 描述 foundation 包含所有F…

晚风撩人 2021-12-29 浏览 751 评论 0 收藏 0

Sass 两个先进特性与局限性

我真的很喜欢 Sass,并且在我的日常工作中很多时候在使用 Sass。他有很有很有用的功能。但是有很些东西我想做却不能做,他的语法和功能有所限制。今天我想分享一下我在使用Sass的一些发现,同时我也想知道你是否碰到这些限制以及你又是如何绕过他们。 插值 Interpolation 使用CSS预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象…

想挽留 2021-12-28 浏览 783 评论 0 收藏 0

使用 Sass 制作菱形网格布局

  • 使用 Sass 制作菱形网格布局
  • 使用 Sass 制作菱形网格布局
  • 使用 Sass 制作菱形网格布局
  • 使用 Sass 制作菱形网格布局

自从我从事 WEB 开发以来,一直都在规规矩矩地使用标准的栅格布局。直到有一次在公司跟实习生交流时,我意识到开发者的思维已经被条条框框固定住了。这里并不是想说栅格布局这种规规矩矩的布局有什么不好,实际上这些布局就像是沃尔沃汽车一样,让人感到安稳和可靠。但是,拥抱变化何尝不是一件趣事?非常幸运的是,我能与众多才华横溢的设计师共同工作。在最近的一个项目中,他们提出了一种基于栅格布局的菱形布局。 旋转 …

浮生未歇 2021-12-27 浏览 819 评论 0 收藏 0

开始使用 Sass

  • 开始使用 Sass
  • 开始使用 Sass
  • 开始使用 Sass
  • 开始使用 Sass

一种 CSS 的预处理器。我展示了如何在 Codekit 中创建一个工程来编写 Sass 文件,并且介绍了一些 Sass 的语言格式,关于 partials,变量,注释和错误。 在第二部分,我们将要深入的研究一下变量和进行变量运算以实现垂直节奏。我也将谈谈使 CSS 更加容易阅读和维护的 Sass 的嵌套规则。 垂直规律的变量 在我的Sketch中,文本和布局元素总是用10像素的基础网格对齐,我想…

想挽留 2021-12-26 浏览 865 评论 0 收藏 0

写 CSS 最好方法 OOCSS + Sass

OOCSS 非常棒。但在HTML标签中有很多不具语义化的类名也并不可怕。而在 HTML 标签上的类名会改变就是一件很有趣的事情。如果你把 OOCSS 和 Sass 结合在一起,你会得到两个优势:CSS 模块不臃肿和 HTML 维持不变。 OOCSS 指引 HTML 的维护 首先,简单的声明,你可能第二次看到非语义(non-semantic)这个词。事实上是这样的,我并不太关心他介是不是“非语义”,…

偏爱自由 2021-12-26 浏览 534 评论 0 收藏 0

初学 Foundation 之 Foundation 的 Sass 样式解释

  • 初学 Foundation 之 Foundation 的 Sass 样式解释
  • 初学 Foundation 之 Foundation 的 Sass 样式解释
  • 初学 Foundation 之 Foundation 的 Sass 样式解释
  • 初学 Foundation 之 Foundation 的 Sass 样式解释

在本教程我们将学习包含在 Foundation 前端框架中的灵活的Sass样式以及能够用来做些什么。Sass 比 CSS 版本提供更多自定义特性集合,再加上有快捷方式可以简单又快速地运用在样式项目上,例如顶部工具栏。 你可以通过在控制台输入命令行方式来搭建环境,然后使用 Compass 和 Bourbon(一个简单却轻量级混合 Sass 库),或者只是从Github上下载单独Sass文件,然后放置…

浮生未歇 2021-12-25 浏览 840 评论 0 收藏 0

Sass 的新特性

Sass 是 CSS 的预处理器,这也是现在最常见讨论的一个话题。Sass最早是2007年由Hampton Catlin提出。Sass到现在已经走了很长的路了,到现在也是最常见的CSS预处理程序。 如果您还不知道什么是Sass,我强烈推荐您阅读一下 David Walsh 写的这文章和Chris Coyier写的文章。 不管什么情况之下,我将假定您基本都了解Sass,你们当中有一些人甚至是Sass…

瑾兮 2021-12-24 浏览 731 评论 0 收藏 0

Sass 的表达式和控制命令

如果你深入地使用过 Sass,那么一定会接触过 mixin。一个独立的 mixin 往往聚合了大量的控制指令来实现复杂的功能。 在本文中我们就将这些控制指令和表达式做一些讲解和实践。也许你在开发中不见得会用到它们,但是熟悉一下这些指令,可能会有意想不到的收获! if() if() 是 Sass 的一个内建函数,与之相似的 @if 则是一个内建指令。if() 用来做条件判断并返回特定值,示例如下: …

灵芸 2021-12-22 浏览 859 评论 0 收藏 0

为了性能 选择 Mixins 吧!

当我们提及预编译的时候,我经常会被问到的一个问题是 Mixins 还是 @extend ? 关于这个话题我经常直言不讳,而且鉴于以下的这几条原因,我坚定的认为你应该避免使用@extend: @extend 会改变了你的源命令,这在CSS中是相当危险的。 @extend 会破坏代码结构合理性,把不相关的选择器串联到一起。 @extend 是非常贪婪的,它会包含一切的代码,而不仅仅是你想要的那一个。 …

浮生未歇 2021-12-22 浏览 952 评论 0 收藏 0

使用 Sass 定制个性化样式

我并不介意你是否立即阅读本文,如果你把它加入收藏夹,并且在大脑中留有印象会更好。接下来我讲要谈论一下利用Sass的特性编写个性化样式的话题。 假设你要一次性为不同的品牌做几个不同的网站。假定有四个品牌: Bob's Burgers Paddy's Pub Stu's Stews Jurrasic Fork 如果我们为每个品牌,从头到尾地编写页面和样式,那工作量就太大了。大体上看就会有四倍工作量要做…

想挽留 2021-12-22 浏览 819 评论 0 收藏 0
更多

推荐作者

意中人

文章 0 评论 0

artaime

文章 0 评论 0

用户100600860645

文章 0 评论 0

J.smile

文章 0 评论 2

qq_MVfp79

文章 0 评论 0