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

sass了解以及安装

SASS简单的说,他是css的升级版,他可以自定义变量,可以有if语句,还可以嵌套等等,很神奇吧!那下面我们就来介绍这个神奇的SASS!一.了解saaa1.什么是sassSASS

       SASS简单的说,他是css的升级版,他可以自定义变量,可以有if语句,还可以嵌套等等,很神奇吧!那下面我们就来介绍这个神奇的SASS!


一.了解saaa

1.什么是sass

SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。


2.sass与less的区别


(1).Less和Sass在语法上有些共性,比如下面这些:

①、混入(Mixins)——class中的class;
②、参数混入——可以传递参数的class,就像函数一样;
③、嵌套规则——Class中嵌套class,从而减少重复的代码;
④、运算——CSS中用上数学;
⑤、颜色功能——可以编辑颜色;
⑥、名字空间(namespace)——分组样式,从而可以被调用;
⑦、作用域——局部修改样式;
⑧、Javascript 赋值——在CSS中使用Javascript表达式赋值。

(2).less和sass的不同

Less和Sass的主要不同就是他们的实现方式。

Less是基于Javascript,是在客户端处理的。
Sass是基于Ruby的,是在服务器端处理的。

关于变量在Less和Sass中的唯一区别就是Less用@Sass用$


3.sass与scss的区别

Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:

    1.文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
    2.语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。


    不管是 Sass 的语法格式还是 SCSS 的语法格式,他们的功能都是一样的,不同的是其书写格式和文件扩展名不同,来看一个简单的对比图:




4.Sass/SCSS 和纯 CSS 写法差很多吗?

(1).Sass 和 CSS 写法有差别:

Sass 和 CSS 写法的确存在一定的差异,由于 Sass 是基于 Ruby 写出来,所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号,其主要是依靠严格的缩进方式来控制的。


(2).SCSS 和 CSS 写法无差别:

SCSS 和 CSS 写法无差别,简单点说,把你现有的“.css”文件直接修改成“.scss”即可使用。


二.安装

1.安装ruby

    SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。下载ruby



安装完成后需测试安装有没有成功,运行CMD输入以下命令:


安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开:Start Command Prompt with Ruby




2.安装sass


然后直接在命令行中输入:


gem install sass




执行gem install sass 命令,安装sass完成。


测试sass是否安装成功,执行:sass -v
结果如下:




到这里,sass就已经安装好了。


补充:

如果这边安装sass不能成功的话,那就直接在网上下载sass的文件


在执行命令:

gem install     Users\php\Downloads\sass-3.4.13.gem (sass文件下载的存放路径)


回车,这样也是可以安装sass



三.sass更新


在命令执行:
gem update sass





四.卸载sass


在命令执行:

gem uninstall sass






推荐阅读
  • 本文主要分享【】,技术文章【SassScss、Less是什么?】为【CRMEB】投稿,如果你遇到CRMEB,学习笔记相关问题,本文相关知识或能到你。Sass(SyntacticallyAw ... [详细]
  • 本文详细介绍了网络存储技术的基本概念、分类及应用场景。通过分析直连式存储(DAS)、网络附加存储(NAS)和存储区域网络(SAN)的特点,帮助读者理解不同存储方式的优势与局限性。 ... [详细]
  • 本文将介绍网易NEC CSS框架的规范及其在实际项目中的应用。通过详细解析其分类和命名规则,探讨如何编写高效、可维护的CSS代码,并分享一些实用的学习心得。 ... [详细]
  • 基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发
    本文详细介绍了使用Node.js、Express、MongoDB和Socket.io构建的实时聊天应用程序。涵盖项目结构、技术栈选择及关键依赖项的配置。 ... [详细]
  • 深入解析Serverless架构模式
    本文将详细介绍Serverless架构模式的核心概念、工作原理及其优势。通过对比传统架构,探讨Serverless如何简化应用开发与运维流程,并介绍当前主流的Serverless平台。 ... [详细]
  • 在寻找轻量级Ruby Web框架的过程中,您可能会遇到Sinatra和Ramaze。两者都以简洁、轻便著称,但它们之间存在一些关键区别。本文将探讨这些差异,并提供详细的分析,帮助您做出最佳选择。 ... [详细]
  • 本文探讨了前端包管理器的核心功能,包括注册机制、文件存储、上传下载、以及依赖分析等关键特性,并介绍了几种流行的前端包管理工具。 ... [详细]
  • 构建Snowflake中的近实时数据摄取管道
    探索如何在Snowflake中构建高效的近实时数据摄取管道,利用其内外表特性及Snowpipe服务,实现数据的快速、稳定加载。 ... [详细]
  • Sass 是一种 CSS 的预处理器,通过使用变量、嵌套、继承等高级功能,使得 CSS 的编写更加灵活和高效。本文将介绍 Sass 的基本语法及其安装使用方法。 ... [详细]
  • 原因:增加配置:webpack.base.conf.jsloaders:{scss:[vue-style-loader,css,sass].join(! ... [详细]
  • 在我的gulpfile中,我注意到了这种奇怪的行为。如果我这样定义手表(带括号): ... [详细]
  • 1.什么是预处理器?  CSS预处理器是用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题。 ... [详细]
  • 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用
    8.3.1安装和配置运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境。使用NPM全局安装Gulp,命令如下:npminstallgulp-cli–g ... [详细]
  • 安装 node-sass 的不成功
    昨天安装项目依赖的包,差不多都装好了,然后就卡在了node-sass上,各种报错。报错一、gypERR!stackError:CantfindPythonexecutablep ... [详细]
  • 使用npm安装gulp-sass:因项目需要,在写好了package.json的情况下,进行npminstall。但是npminstall中安装gulp-sass失败:删去node_module ... [详细]
author-avatar
安彬2502936127
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有