使用Sass预定义一些常用的样式，非常方便

CoderChang 2014-06-04

各种新技术的出现，推动着Web前端技术飞速发展，在提升用户体验的同时也方便开发者；

在前端优化时，我们使用CSSSprite技术，把多个图片合在一张图片上，然后通过background-image，background-position来定位现实不同效果，这样来达到减少HTTP请求，毕竟HTTP请求是相当昂贵的，但是HTTP请求是少了，开发人员工作量就大了，要定位图片不是一件很方便的事情，非常麻烦，要一个一个地计算：

使用Sass预定义一些常用的样式，非常方便

其实我们可以有点技巧，让图片排列有点规律，这样可以减少大量时间：

假如我们的图片是规律的，如每个区域高都是30px，这样我们可能通过结合Sass里for来快速现实对图片的定位：

scss:

@for $i from 0 to 17{
      .d-icon-#{$i}{ background-position: -0 -#{+ $i*30}px; }
}

编译结果：css

使用Sass预定义一些常用的样式，非常方便

.d-icon-0 { background-position: 0 -0px; }

.d-icon-1 { background-position: 0 -30px; }

.d-icon-2 { background-position: 0 -60px; }

.d-icon-3 { background-position: 0 -90px; }

.d-icon-4 { background-position: 0 -120px; }

.d-icon-5 { background-position: 0 -150px; }

.d-icon-6 { background-position: 0 -180px; }

.d-icon-7 { background-position: 0 -210px; }

.d-icon-8 { background-position: 0 -240px; }

.d-icon-9 { background-position: 0 -270px; }

.d-icon-10 { background-position: 0 -300px; }

.d-icon-11 { background-position: 0 -330px; }

.d-icon-12 { background-position: 0 -360px; }

.d-icon-13 { background-position: 0 -390px; }

.d-icon-14 { background-position: 0 -420px; }

.d-icon-15 { background-position: 0 -450px; }

.d-icon-16 { background-position: 0 -480px; }

.d-icon-17 { background-position: 0 -510px; }

.d-icon-18 { background-position: 0 -540px; }

.d-icon-19 { background-position: 0 -570px; }

使用Sass预定义一些常用的样式，非常方便

无论多少个图片，使用Sass一句话搞定，不是方便，是相当方便。

这里使用了@for $i from a to b;还是一种是@for $i from a through b;$i是一个变量，自己随便取，从a到b，to，through的区别是to 不包括b，through包括b，上面的例子，如果使用through，将多一个.d-cions-20{}

: CoderChang

相关推荐

Node Sass 弃用，以 Dart Sass 代替

就在今天，Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。读完本文以下问题将会得到解答。那么为什么会有这次改动呢?之后 Node Sass 还维护吗?Dart S

RedCode 0喜欢 / 0评论 2020-10-28

CSS之Sass入门

大家都知道，js 中可以自定义发量，css 仅仅是一个标记语言，不是编程语言，因此不可以自定义发量、不可以引用等等。一种帮助你简化 CSS 工作流程的方式，帮助你更容易维护和开发 CSS 内容。Sass 是这个世界上最成熟、稳定和强大的专业级 CSS 扩展

teresalxm 0喜欢 / 0评论 2020-06-05

解决windows下node-sass安装失败和版本过高的问题

vue中使用scss时报错sass-loader版本过高

覆雪蓝枫 0喜欢 / 0评论 2020-06-02

HubilderX中编译sass文件

　　sass环境已搭建成功。　　HbuilderX插件已安装scss/sass编译。　　.scss文件右键--》外部命令/插件--》sass--》编译sass/scss. 成功后控制台输出成功提示：Wrote CSS to /...文件路径，默认在当前文件

沈宫新 0喜欢 / 0评论 2020-05-28

sass-安装

　　　　　　勾选 Add Rbby executables to your PATH添加到系统环境变量。如果想在 css 文件夹下生成对应的css 文件就在终端键入命令: sass ./sass/a.sass ./css/a.css

dazhifu 0喜欢 / 0评论 2020-05-19

vue配置sass全局样式

$color-red:red;$color-yellow: yellow;$color-white: white;$color-light-gray: #F5F5F5;},

buttonChan 0喜欢 / 0评论 2020-05-10

没你想象的那么难！深度剖析三款最实用的css预处理器

css预处理器种类繁多，本次小渡就以Sass、Less、Stylus进行比较。Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。Less优缺点1.作为目前最流行的css预处理器之一的less，可谓是Sass最强劲的对手，诞生

nicepainkiller 0喜欢 / 0评论 2020-02-23

导入sass文件

sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。1sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件

vavid 0喜欢 / 0评论 2020-02-15

Allenmind‘s Blog

听说，Sass和Compass更配哟。来看看Compass的基本用法！之前写了一篇关于Sass基本用法的文章。Sass可以加快CSS的编写效率，让CSS的开发变得更加简单和可维护。但是，想要发挥Sass的全部功力，就需要配合Compass一起使用。Comp

tianzyc 0喜欢 / 0评论 2020-02-01

sass基础语法

通常，@import寻找 Sass 文件并将其导入，但在以下情况下，@import仅作为普通的 CSS 语句，不会导入任何 Sass 文件。文件拓展名是.css；文件名以http://开头；

nicepainkiller 0喜欢 / 0评论 2020-01-29

sass css样式：@for循环、样式变量与#{} 变量插值

$sizei:$i*7.5;$sizej:$j*7.5;top:#{$sizei}vw;left:#{$sizej}vw;$sizen:$n*7.5;top:#{$sizei}vw;left:#{$sizen}vw;};$sizei:$i*7.5;$siz

dazhifu 0喜欢 / 0评论 2020-01-25

mac下安装sass

mac虽然装好Ruby，但是我执行：。我这种小白只能：

octopusnju 0喜欢 / 0评论 2013-05-13

vue-cli3 搭建vue项目

你会被提示选取一个 preset（预设）。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产

CaiKanXP 0喜欢 / 0评论 2020-01-08

IT兄弟连 HTML5教程初识Sass 小结及习题

Sass完全兼容CSS语法，并且添加了一些编程的特性，编写的Sass代码在编译之后最终生成的是CSS文件。Sass具有维护性高、可扩展性强、复用性高的优点，提高我们的编码效率。Sass是使用Ruby语言编写的，Sass的运行是依赖于Ruby环境的，所以在安

葉無聞 0喜欢 / 0评论 2019-12-30

浅谈Css、less和Sass（SCSS）

想必大家学习CSS的时候一定接触过LESS和SASS吧，但可能还是有很多朋友对他们的概念模糊，下面不妨就跟着一起了解一下关于它们的故事。为了方便前端开发的工作量，出现了sass和less。比如说，sass中可以把反复使用的css属性值定义成变量，然后通过变

waterv 0喜欢 / 0评论 2019-12-27

直击css系列----Css、less和Sass（SCSS）

CSS是一门非程序式语言，入门学习使用非常直观方便，但是对于一些比较复杂或者重用性比较强的项目来说，因为CSS没有变量、函数、SCOPE（作用域），需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少

福叔 0喜欢 / 0评论 2019-12-27

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

本文重点在于HTML5与CSS3的学习和使用，HTML与CSS不属于编程范畴，更偏向于设计，而Sass是编程化的CSS的扩展语言，对于没有接触过编程的读者可能会有点吃力，这里不做对语法详细介绍，仅作为基本介绍，让读者了解Sass的优越性，如果对Sass感兴

swiftwwj 0喜欢 / 0评论 2019-12-27

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

Sass作为一门具有编程性质的CSS扩展语言，它具有独立的文件名称，因为其历史原因，它的后缀名可以有两个选择，分别为sass和scss，其中sass的编写格式不符合CSS编程语法规范，其不能使用大括号和分号，需要的严格的缩进来做定界。compact模式保留

MaureenChen 0喜欢 / 0评论 2019-12-26

学习Sass

Sass中文文档。Sass百度百科

zengni 0喜欢 / 0评论 2019-12-15

sass使用（浅解）

基于css的缺点，因此在写项目时需要用sass来写。sass有两种语法，分别是以 .sass、 .scss为扩展名。前者诞生于07年，是最早也最成熟的css预处理器。scss是sass3所引入的，其语法完全兼容css3，并且继承了sass的强大功能，scs

MaureenChen 0喜欢 / 0评论 2019-12-01

分享一个vue项目脚手架项目

源于公司每次新启动一个由多人协同开发的项目都由负责人初始化项目之后，每个人再去从私服pull一下项目才开始开发。@import './mixin.scss'; // 公共函数@import './icomoon.css'; //字体图标@import

juzhengqian0 0喜欢 / 0评论 2019-11-19

vue-cli配置全局sass、less变量

vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的， yarn源的问题有可能导致失败。如果上面安装失败的话，就分别安装 style-resources-loader 和 vue-cli-plugin-st

wghou 0喜欢 / 0评论 2019-11-17

「翻译」逐步替换Sass

一开始，我并没有移除代码中所有的 sass 代码。随着这年 css 的发展，曾经让我使用 sass 的原因似乎不那么重要了。大概 5、6 年前，我第一次了解到 sass 的时候，我是有些换衣的。显而易见的是，随着设备、视图窗口和主题等场景的变化，使用变量让

buttonChan 0喜欢 / 0评论 2019-11-17

CSS之 sass、less、stylus 预处理器的使用方式与区别

　　stylus: 对变量没有任何设定，变量之间可以使用 “=”， “空格”或者 “：”，如: base_font_color: red, borderwidth=1px, borderColor #cacaca. margin: 4px;/* 调用混入语

CaiKanXP 0喜欢 / 0评论 2019-11-10

在windows下安装node-sass失败，提示 ode-sass: Command failed，解决方案

出现这个问题的原因一般是网络问题，被墙了，这个时候我们不妨换个源试试。最后执行一下命令安装成功

YarnSup 0喜欢 / 0评论 2019-11-09

使用Sass预定义一些常用的样式，非常方便

CSS预处理技术现在已经非常成熟，比较流行的有Less，Sass，Stylus，在开发过程中提升我们的工作效率，缩短开发时间，方便管理和维护代码，可以根据自己的喜好选择一款自己喜欢的工具开发，使用很接近，差别很小，语法类似。再选择一款编译工具koala，国

opspider 0喜欢 / 0评论 2014-06-04

centos安装sass环境必看

首先了解一下 sass是什么？！sass号称“世界上最成熟、最稳定、最强大的专业级css扩展语言” ，sass基于于Ruby语言开发而成，因此安装sass前需要安装Ruby，ruby -v//如安装成功会打印ruby 2.2.2p95 [i386-min

LUCIEN0 0喜欢 / 0评论 2019-11-04

Vue中使用sass实现换肤功能

base.scss：一些通用样式文件。mixin.scss：定义mixin方法的文件。以下就拿封装的head组件代码来展示以下实现逻辑，现在大家主要是来理解，不要着急复制代码，在文章最后会贴出三个主要文件的代码的。为什么会在 background:$b

waterv 0喜欢 / 0评论 2018-09-07

CSS预处理器之less和sass

CSS预处理器的作用。a) Ruby写的C++写的，有node版本：node-sass. &符号是同级关系因此有以下相同写法。sass中使用extend的方式使用@extend. 运行结果与less结果相同，只是选择器有无换行。

waterv 0喜欢 / 0评论 2019-10-27

vue-cli+webpack构建vue项目和使用sass报错填坑

　　打开要建项目所在的文件夹，点击空白处按住 shift + 鼠标右键，打开 Powershell窗口进行接下来的操作。　　因为在指定文件夹打开，因此不用再选择路径，可直接输入命令，　　其中webpack是模板名称，因为是需要webpack的打包功能；　　

yezitoo 0喜欢 / 0评论 2019-10-25

sass 的基本用法

Sass 是成熟、稳定、强大的 CSS 扩展语言。完全兼容各个版本的 CSS 语法。sass 有两种语法，一种是以 .sass 为扩展名的语法，写法为缩排语法，即不使用花括号，而是通过缩进的方式来表达选择符的嵌套层级；而且也不使用分号，而是用换行符来分隔属

e度空间 0喜欢 / 0评论 2019-10-23

sass mixin

1、如何使用sass？

aiolos 0喜欢 / 0评论 2015-03-09

gulp如何编译sass

npm init命令会为你创建一个package.json文件，这个文件保存着这个项目相关信息。比如你用到的各种依赖。这一次，我们局部安装Gulp。使用—save-dev，将通知计算机在package.json中添加gulp依赖。

wuyou 0喜欢 / 0评论 2017-02-09

win7安装sass

因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。先导官网下载个ruby. 在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境

xjpans 0喜欢 / 0评论 2017-02-08

Sass 安装及其常见错误的解决办法

Sass是一种css的开发工具，它的安装依赖Ruby，没有安装Ruby的请先安装Ruby。假定你已经安装了Ruby，则可以直接执行如下语句进行安装。hostname "gems.ruby-china.org" does not matc

JamesRen 0喜欢 / 0评论 2017-09-27

vue项目中引入Sass实例方法

Sass作为目前成熟，稳定，强大的css扩展语言，让越来越多的前端工程师喜欢上它。下面介绍了如何在vue项目。首先在项目文件夹执行命令 npm install vue-cli -g，安装vue-cli脚手架，若是已经安装了，则不必再次安装，直接。接下来执行

冰蝶 0喜欢 / 0评论 2019-08-27

sass有什么用？

"Sass是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后，Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。Sas

lkwkqd 0喜欢 / 0评论 2019-07-17

【sass】如何在vue项目中使用sass语法

buttonChan 0喜欢 / 0评论 2019-07-18

vue-cli中配置全局sass变量

如何定义样式的变量，使得全局的样式可以在组件中使用，网上找了一些办法，亲测可以使用，我就记录下来；npm i sass-resources-loader --save-dev2、修改vue-cli的目录下build/utils.js，如图

yongquanx 0喜欢 / 0评论 2019-07-01

CSS语言预处理----SASS一分钟快速入门

@charset "utf-8";$text-color:#000;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;overflow

yezi 0喜欢 / 0评论 2019-07-01

自从用了Sass，我比以前更快了

前言说到css，相信大家都知道，css样式是用来修饰网页页面结构的。对于一名前端来说写好css并不难，但如何写出优雅可复用、易重构的css代码并不容易。于是css预处理器便出现在大家的视线里，分别是 stylus、less、sass。它们的出现让编写css

yaodilu 0喜欢 / 0评论 2019-07-01

Javascript如何与Sass,Less,Css之间共享变量？

前段时间遇到网站换肤的需求，本想挺简单的，直接用 Sass 或者 Less 设置变量就好了，结果导致的问题就是 js 中设置的样式。得单独设置，好麻烦。查了好多资料，最终的解决方案如下：。@value bgcColor: red; 会导出@ 后面的变量

王景迁 0喜欢 / 0评论 2019-07-01

【quickly-css】（极易上手）一款使用Sass构建的高效开发CSS库

简介quickly-css是一个快速书写CSS样式的类库，项目采用scss,gulp构建，quickly-css方便了我们日常开发重复书写css的烦恼，它类似于bootstrap但又不同于bootstrap。基本的使用<div class="

nicepainkiller 0喜欢 / 0评论 2019-07-01

npm和yarn安装node-sass的问题

node-sassnpm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。这是使用 sass 的同学可能都会遇到的郁闷的问题。当我们yarn下载nod

Returnvalues 0喜欢 / 0评论 2019-07-01

node-sass安装失败的解决方式

给着急的同学着急的同学，直接看最后一节，操作步骤。先解决燃眉之急，然后有时间可以再回来细细品味。既然node-sass总是从缓存拉取，那么我们就在缓存那里，直接把正确的文件放在那里，这样在安装node-sass时，直接从缓存中拉倒了正确的binding.n

bjkamui 0喜欢 / 0评论 2019-07-01

sass介绍及使用

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.Sass 是成熟、稳定、强大的 CSS 扩展语言。--

afeichuanqi 0喜欢 / 0评论 2019-07-01

mpVue配置sass全局变量

参考了网上的几种方法，我总结了一种最简洁的的方法：1、确保有安装这3个包sass-loader，node-sass，sass-resources-loader：，没有的话就安装：。npm install sass-resources-loader --sa

crazestylus 0喜欢 / 0评论 2019-07-01

基于 less,sass,stylus三种预处理rem

@{name}: @px / @fontSizeBase * 1rem;.px2rem(fontsize, 750);font-size: 10rem;#{$name}: $px / $fontSizeBase * 1rem;@include px2rem

碎冰stylus融 0喜欢 / 0评论 2019-07-01

大话css预编译处理（三）：基础语法篇

值得庆幸的是，这三款CSS预处理器语言的语法和CSS语法都差不多。这样Sass代码转换成CSS代码变得更容易。默认Sass使用.scss扩展名。

沉着前进 0喜欢 / 0评论 2019-06-30