`

SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程

阅读更多

日期:2013-2-18  来源:GBin1.com

SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程

什么是SASS?

SASS英文意思是Syntactically Awesome Stylesheets Sass,最早由Hampton Catlin开发和设计。SASS是一种帮助你简化CSS工作流程的方式,帮助你更容易的维和和开发CSS内容。

如果你不明白为什么用SASS,你可以先看看这篇文章 为什么需要将SASS和Compass融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣

最 简单的例子,你是不是经常需要使用“查询”和“替换”功能来修改CSS文件中某一个16进制的颜色?或者是打开一个计算器来计算多列设计中的列宽? SASS介绍了一个新的概念例如,variables,mixins,镶套或者是选择器继承。 从外形上看起来,非常像CSS,但是并没有分割号或者大括号。

看看下面这个简单的CSS:

#skyscraper_ad
{
  display: block;
  width: 120px;
  height: 600px; 
}

#leaderboard_ad 
{
  display: block;
  width: 728px;
  height: 90px; 
}

如果你需要使用SASS,则如下代码:

#skyscraper_ad
  display: block
  width: 120px
  height: 600px

#leaderboard_ad 
  display: block
  width: 728px
  height: 90px

SASS使用双空格的缩进来定义代码镶套结构。这里你可以大体的了解SASS的样子,下面我们将介绍为什么SASS如此的棒!

如果你需要更多了解SASS,可以查看这篇内容为什么需要将SASS和Compass融入CSS代码开发流程

变量

在SASS中使用美元符号定义一个变量,在这个例子里,一个美元自负,变量名字加上一个冒号定义一个变量。

........

来源:SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程

分享到:
评论

相关推荐

    node-sass和sass-loader下载.zip

    在前端开发中,CSS预处理器如Sass(Syntactically Awesome Style Sheets)极大地提高了样式编写效率和可维护性。Sass提供了变量、嵌套规则、混合、函数等特性,使得CSS代码更加简洁和模块化。然而,在Node.js环境中...

    sass相关依赖包,方便不便于下载sass的同学

    在前端开发领域,Sass(Syntactically Awesome Style Sheets)是一种强大的CSS预处理器,它扩展了CSS语言,增加了变量、嵌套规则、混合、函数等特性,使得CSS编写更简洁、可维护性更强。本资源是针对Sass相关依赖包...

    前端技术之Sass教程.zip

    Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS语言,提供了变量、嵌套规则、混合(mixins)、函数等高级特性,使得CSS编写更易维护和扩展。本教程将深入探讨Sass的基础知识及其在前端...

    node-sass4.14.1和5.0.0版本.zip

    在前端开发领域,Node-SASS是一个至关重要的工具,它作为JavaScript与SASS(Syntactically Awesome Style Sheets)之间的桥梁,使得开发者能够便捷地在Node.js环境中编译和处理SASS文件。本文将深入探讨Node-SASS的...

    node-sass.zip

    其中,Sass(Syntactically Awesome Style Sheets)以其强大的功能和广泛的社区支持,成为了众多开发者的选择。在Node.js环境中,node-sass是实现Sass编译为CSS的核心库,它为我们提供了方便快捷的方式来处理Sass...

    node-sass.rar

    在现代前端开发中,SASS(Syntactically Awesome Style Sheets)是一种流行的CSS预处理器,它扩展了CSS语法,提供了变量、嵌套规则、混合(mixins)、函数等特性,极大地提高了CSS代码的可维护性和复用性。Node-SASS...

    SASS 零基础学习案例以及安装教程

    SASS(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS语言的功能,使样式表的编写更高效、更模块化、更易于维护。对于初学者来说,SASS提供了一个强大的工具集,能够帮助你更好地组织和构建...

    bootstrap-sass-3.3.5

    Sass(Syntactically Awesome Style Sheets)是一种强大的CSS预处理器,它允许开发者使用变量、嵌套规则、混合、函数等特性编写更简洁、可维护的CSS代码。 Bootstrap 3.3.5是该框架的一个稳定版本,它包含了众多UI...

    koala sass less预处理编译器

    Sass(Syntactically Awesome Style Sheets)是CSS的扩展,它引入了变量、嵌套规则、混合、函数等高级特性,让CSS代码更加模块化、可维护性更强。Less(Leaner Style Sheets)同样是一种CSS预处理器,它提供变量、...

    sass git clone代码

    Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS语法,提供了变量、嵌套规则、混合、函数等特性,使CSS更易于维护和扩展。 首先,我们需要了解Git。Git是一个分布式版本控制系统,用于...

    Sass和Compass设计师指南pdf+源码

    Sass(Syntactically Awesome Style Sheets)是一种强大的CSS预处理器,它扩展了CSS语法,增加了变量、嵌套规则、混合、函数等功能,使CSS编写更加高效和可维护。而Compass是一个基于Sass的样式框架,提供了大量实用...

    Sass全面解析.pdf

    Sass的原意是“Syntactically Awesome Stylesheets”,意味着它不仅是一套CSS扩展,还是一种编写样式表的全新语法。Sass由Hampton Catlin创建,并且现在由大社区维护。Sass文件通常带有.sass或.scss扩展名,其中前者...

    Hyper可爱的sass框架

    Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS语言,引入了变量、嵌套规则、混合、函数等特性,使得CSS编写更加简洁、模块化。Hyper框架利用Sass的强大功能,为开发者提供了一套完整的...

    node组件node-sass、sass-loader

    其中,`node-sass` 和 `sass-loader` 是两个非常关键的组件,用于处理Sass(Syntactically Awesome Style Sheets)语言的编译。Sass是一种CSS预处理器,它扩展了CSS的功能,提供了更高级的特性如变量、嵌套规则、...

    dart-sass-1.22.9-windows-x64.zip

    Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS的功能,允许我们使用变量、嵌套规则、混合、函数等编程特性来编写更易于管理和维护的样式表。Dart Sass作为Sass的实现,与Ruby Sass保持...

    server-sass-1.2.zip

    【server-sass-1.2.zip】是一个包含Server-Sass版本1.2的压缩包,这是一个用于在Node.js环境中编译Sass(Syntactically Awesome Style Sheets)的工具。Sass是一种流行的CSS预处理器,它扩展了CSS,增加了变量、嵌套...

    Sass(3.4.21)中文文档

    Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS语言,引入了许多强大的特性,如变量、嵌套规则、混合、函数等,使得CSS编写更易读、可维护。Sass 3.4.21是这个预处理器的一个版本,此...

    Sass和Compass设计师指南源代码

    Sass(Syntactically Awesome Style Sheets)是CSS的一个扩展,它引入了变量、嵌套规则、混合、函数等特性,使CSS编写更简洁、模块化和可维护。而Compass则是一个基于Sass的框架,提供了大量的实用工具和样式库,...

    SASS安装文件&证书文件

    SASS,全称为Syntactically Awesome Style Sheets,是一种预处理器语言,它扩展了CSS,引入了变量、嵌套规则、混合、函数等编程特性,使得CSS编写更加简洁和模块化。SASS编译后会生成标准的CSS文件,可以在任何支持...

Global site tag (gtag.js) - Google Analytics