热门标签 | 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;
}

推荐阅读
  • 本文主要分享【】,技术文章【SassScss、Less是什么?】为【CRMEB】投稿,如果你遇到CRMEB,学习笔记相关问题,本文相关知识或能到你。Sass(SyntacticallyAw ... [详细]
  • 保持sass条理性和可读性的最基本的三个方法:嵌套、导入和注释安装sass和compassruby-v查看ruby版本gemsources—removehttps:rubyg ... [详细]
  • 在 Linux 系统中,`/proc` 目录实现了一种特殊的文件系统,称为 proc 文件系统。与传统的文件系统不同,proc 文件系统主要用于提供内核和进程信息的动态视图,通过文件和目录的形式呈现。这些信息包括系统状态、进程细节以及各种内核参数,为系统管理员和开发者提供了强大的诊断和调试工具。此外,proc 文件系统还支持实时读取和修改某些内核参数,增强了系统的灵活性和可配置性。 ... [详细]
  • 编译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(! ... [详细]
  • vue使用Sass时出现报错问题如何解决
    本篇文章为大家展示了vue使用Sass时出现报错问题如何解决,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获 ... [详细]
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • 在ReactWeb应用程序的上下文中,cssscsssass中有哪些功能是使用纯JavaScript ... [详细]
  • ruby环境中自动编译sass教程
    ruby环境中自动编译sass教程-sass为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护!sass安装安装完ruby之后,在开始菜单中,找到 ... [详细]
  • 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用
    8.3.1安装和配置运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境。使用NPM全局安装Gulp,命令如下:npminstallgulp-cli–g ... [详细]
  • 为了向用户提供虚拟应用程序,通常会在基础架构中部署StoreFront或Web Interface。为了确保安全的远程访问,通常需要在DMZ中配置Secure Gateway或Access Gateway。本文详细对比了这两种界面工具的功能特性,包括用户管理、安全性、性能优化等方面,为企业选择合适的解决方案提供了全面的参考。 ... [详细]
  • 本文深入探讨了ASP.NET中ViewState、Cookie和Session三种状态管理技术的区别与应用场景。ViewState主要用于保存页面控件的状态信息,确保在多次往返服务器过程中数据的一致性;Cookie则存储在客户端,适用于保存少量用户偏好设置等非敏感信息;而Session则在服务器端存储数据,适合处理需要跨页面保持的数据。文章详细分析了这三种技术的工作原理及其优缺点,并提供了实际应用中的最佳实践建议。 ... [详细]
  • 在CSS中为文本框添加黑色边框是一个简单而有效的方法,可以显著提升网页元素的视觉效果。本文将详细介绍如何通过CSS代码轻松实现这一目标,包括设置边框宽度、样式和颜色的具体步骤,帮助开发者快速掌握这一技巧。 ... [详细]
  • 起首须要装置插件:sass-resources-loadernpmisass-resources-loader--save-devscss:修正vue-cli的buildutils ... [详细]
  • 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社区 版权所有