热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Sass入门:第一章

1.什么是预处理器?CSS预处理器是用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题。

1.什么是预处理器?

  CSS预处理器是用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题。

  可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些特性,可以让你的CSS更加简洁、适应性更强、可读性更佳、更易于代码的维护等诸多好处。

例如:

$color : red ; //使用了变量$color
.test
{
color
: $color ;
}

2.CSS预处理语言:

  ▶Sass(SCSS)

  ▶LESS

  ▶Stylus

  ▶Turbine

  ▶Swithch CSS

  ▶CSS Cacheer

  ▶DT CSS

  到目前为止,在众多优秀的CSS预处理语言中,就属Sass、LESSStylus最优秀。

3.什么是Sass?

  Sass官网的描述是:Sass是一门高于CSS的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通CSS更强大的功能。Sass能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。

  Sass是采用Ruby语言编写的一款CSS预处理语言。有着和HTML一样的缩进风格。

4. Sass和SCSS有什么区别?

  Sass和SCSS其实是同一种东西,两者的区别有:

  ▶文件扩展名不同:Sass是以".sass"后缀为扩展名,而SCSS是以".scss"后缀为扩展名。

  ▶语法书写方式不同:Sass是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而SCSS的语法书写和我们的CSS语法书写方式非常类似。

  看下面的例子:

Sass语法

$font-stack : Helvetica , sans-serif      //定义变量
$primary-color : #333 //定义变量

body
font : 100% $font-stack
color : $primary-color

SCSS语法

$font-stack : Helvetica , sans-serif;
$primary-color : #333;

body
{
font
: 100% Helvetica , sans-serif;
color
: #333;
}

编译出来的CSS

body {
font
: 100% Helvetica , sans-serif;
color
: #333;
}

推荐阅读
  • vue使用Sass时出现报错问题如何解决
    本篇文章为大家展示了vue使用Sass时出现报错问题如何解决,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获 ... [详细]
  • 本文主要分享【】,技术文章【SassScss、Less是什么?】为【CRMEB】投稿,如果你遇到CRMEB,学习笔记相关问题,本文相关知识或能到你。Sass(SyntacticallyAw ... [详细]
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • 在 Linux 系统中,`/proc` 目录实现了一种特殊的文件系统,称为 proc 文件系统。与传统的文件系统不同,proc 文件系统主要用于提供内核和进程信息的动态视图,通过文件和目录的形式呈现。这些信息包括系统状态、进程细节以及各种内核参数,为系统管理员和开发者提供了强大的诊断和调试工具。此外,proc 文件系统还支持实时读取和修改某些内核参数,增强了系统的灵活性和可配置性。 ... [详细]
  • 保持sass条理性和可读性的最基本的三个方法:嵌套、导入和注释安装sass和compassruby-v查看ruby版本gemsources—removehttps:rubyg ... [详细]
  • 编译sass,遇到报错error style.scss (Line 3: Invalid GBK character
    今天学习sass,写了一行中文注释,结果却遇到了报错:1cmd.exeDCcallC:Ruby23-x64binscss.bat--no-cache--update ... [详细]
  • 原因:增加配置:webpack.base.conf.jsloaders:{scss:[vue-style-loader,css,sass].join(! ... [详细]
  • 本文将带你快速了解 SpringMVC 框架的基本使用方法,通过实现一个简单的 Controller 并在浏览器中访问,展示 SpringMVC 的强大与简便。 ... [详细]
  • Android 构建基础流程详解
    Android 构建基础流程详解 ... [详细]
  • 在探讨Hibernate框架的高级特性时,缓存机制和懒加载策略是提升数据操作效率的关键要素。缓存策略能够显著减少数据库访问次数,从而提高应用性能,特别是在处理频繁访问的数据时。Hibernate提供了多层次的缓存支持,包括一级缓存和二级缓存,以满足不同场景下的需求。懒加载策略则通过按需加载关联对象,进一步优化了资源利用和响应时间。本文将深入分析这些机制的实现原理及其最佳实践。 ... [详细]
  • Vue应用预渲染技术详解与实践 ... [详细]
  • 为了评估精心优化的模型与策略在实际环境中的表现,Google对其实验框架进行了全面升级,旨在实现更高效、更精准和更快速的在线测试。新的框架支持更多的实验场景,提供更好的数据洞察,并显著缩短了实验周期,从而加速产品迭代和优化过程。 ... [详细]
  • 在进行网络编程时,准确获取本地主机的IP地址是一项基本但重要的任务。Winsock作为20世纪90年代初由Microsoft与多家公司共同制定的Windows平台网络编程接口,为开发者提供了一套高效且易用的工具。通过Winsock,开发者可以轻松实现网络通信功能,并准确获取本地主机的IP地址,从而确保应用程序在网络环境中的稳定运行。此外,了解Winsock的工作原理及其API函数的使用方法,有助于提高开发效率和代码质量。 ... [详细]
  • ruby环境中自动编译sass教程
    ruby环境中自动编译sass教程-sass为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护!sass安装安装完ruby之后,在开始菜单中,找到 ... [详细]
  • node-sassnpm安装node-sass依赖时,会从github.com上下载.node文件。由于国内网络环境的问题,这个下载时间可能会很长,甚至导致超时失败。这是使用sas ... [详细]
author-avatar
L-壹_413
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有