前端学习<二>CSS基础——15-Sass入门

Sass简介

大家都知道,js 中可以自定义变量,css 仅仅是一个标记语言,不是编程语言,因此不可以自定义变量、不可以引用等等。

面对这些问题,我们现在来引入 Sass,简单的说,他是 css 的升级版,可以自定义变量,可以有 if 语句,还可以嵌套等等,很神奇吧!那下面我们就来介绍返个神奇的 Sass。

Sass比Less的功能更强大,也更复杂。

Sass 的定义

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

官网是:Sass: Syntactically Awesome Style Sheets

Sass 是这个世界上最成熟、稳定和强大的专业级 CSS 扩展语言。

Sass专注的是怎样创建优雅的样式表,而不是内容。

Sass、Compass与CSS

关系:

  • Less/Sass是语法、Compass是框架、CSS是目标。

Sass&Compass的好处

  • 写出更优秀的CSS。

  • 解决CSS编写过程中的痛点问题,比如精灵图合图、属性的浏览器前缀处理等。

  • 有效组织样式、图片、字体等项目元素。

受众群体:

  • 重构的同学,写很多CSS,不知如何自动化。

  • 希望在项目周期内更好地组织项目内容。

Sass的安装

sass引擎是用Ruby语言开发的(但是两者的语法没有关系),因此在安装 Sass 前,需要先安装Ruby(mac下自带Ruby无需再安装Ruby)。

下面来讲一下 Windows 下的安装Sass的步骤。

第一步:安装Ruby(windows环境)

下载地址:Downloads

貌似网络很慢,不一定能下载成功~

安装时,记得勾选“环境变量”:

安装完ruby之后,在命令行中输入ruby -v,查看ruby的的版本:

关于Mac下的Ruby

刚刚说了,Mac下自带Ruby,但是版本肯定很老:

有的时候,我们可能需要使用特定版本的ruby,或者在不同的ruby版本之间进行切换,所以,大家可以尝试安装rvm,它是ruby的版本管理工具。官网是:RVM: Ruby Version Manager - RVM Ruby Version Manager - Documentation

第二步:安装 Sass

安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby。输入gem install sass安装Sass。

PS:Ruby 是使用 gem 来管理它的各种包(比如Sass)。我们安装好ruby之后,gem会自动安装上;类似于,我们安装完node之后,npm也自动安装好了。

但是,由于访问网络受限,我们可以先切换到淘宝的镜像,再安装Sass。步骤如下:

(1)移除默认的镜像,添加淘宝的镜像:

     gem sources --remove https://rubygems.org/
 ​
     gem sources -a https://ruby.taobao.org/  //注意:如果你系统不支持https,请将淘宝源更换成:gem sources -a http://gems.ruby-china.org

PS:我测试了一下,Win 7 不支持https,Mac支持https。

(2)查看当前使用的是哪个镜像:

     gem sources -l

(3)安装sass:

紧接着,输入如下命令安装Sass:

     gem install sass        // 如果mac下输入这个命令时没有权限,则需要在前面加上 sudo

系统会自动安装上最新版本的Sass。

查看sass版本的命令为:

     sass -v

升级sass版本的命令为:

     gem update sass

你也可以运行帮助命令行来查看你需要的命令:

     sass -h

参考链接:https://www.w3cplus.com/sassguide/install.html

Compass 简介和安装

安装完sass之后,我们在main.scss中写一些代码,然后输入如下命令,就可以将scss文件转化为css文件

     sass main.scss main.css

然而,真正的项目开发中,我们不一定是直接使用 sass 命令,而是使用 Compass。

Compass 简介

官网是:compass-style.org is almost here!。

Compass 是开源的CSS书写框架。

Compass 安装

输入如下命令安装 Compass:

     gem isntall compass

输入如下命令查看版本:

	compass -v

compass可以直接用来搭建前端项目的样式部分,但并不是常用的方法。

Compass的简单使用

通过 Compass 创建工程目录:

cd workspace

compass create CompassDemo

文件结构如下:

  • /sass

    • ie.scss

    • print.scss

    • screen.scss

  • /stylesheets

    • ie.css

    • print.css

    • screen.css

  • config.rb

为了能够让文件实时编译,我们可以通过 copass watch 监听sass文件的变化:

	cd CompassDemo

	compass watch

当.scss文件改动时,会自动生成对应的.css文件。

Sass的语法

两种后缀名(两种语法)

sass 有两种后缀名文件:

(1).sass:对空格敏感。不使用大括号和分号,所以每个属性之间是通过换行来分隔。

比如:

h1
	color: #000
	background: #fff

这种语法是类ruby的语法,和CSS的语法相比,相差较大。所以,在3.0版本中就引入了.scss的语法。

(2).scss:是css语法的超集,可以使用大括号和分号。

比如:

h1 {
	color: #000;
	background: #fff;
}

注意:一个项目中可以混合使用两种语法,但是一个文件中不能同时使用两种语法。

两种格式之间的转换:

我们在工程目录下新建main.scss,输入如下代码:

*{
    margin: 0;
    padding: 0;
}

然后输入如下命令,就可以将上面的main.scss转化为main.sass

	sass-convert main.scss main.sass

打开生成的main.sass,内容如下:

*
  margin: 0
  padding: 0

变量语法

Sass 是通过$符号来声明变量。

(1)我们新建一个文件_variables.scss,这个文件专门用来存放变量,然后在其他的文件中引入_variables.scss即可。

因为这个文件只需要存储变量,并不需要它编译出对应的 css 文件,所以我们给文件名的前面加了下划线,意思是声明为局部文件

我们在这个文件中,声明两个字体变量:

$font1: Braggadocio, Arial, Verdana, Helvetica, sans-serif;

$font2: Arial, Verdana, Helvetica, sans-serif;

(2)新建文件main.scss,在里面引入步骤(1)中的变量文件:

@import "variables";    // 引入变量文件

.div1{
    font-family: $font1;
}

.div2{
    font-family: $font2;
}

基于 Sass 的既定规则:

  • 没有文件后缀名时,Sass 会自动添加 .scss 或者 .sass 的后缀(具体要看已经存在哪个后缀的文件)。

  • 同一目录下,局部文件和非局部文件不能重名。

对应生成的main.css文件如下:

main.css

/* line 9, ../sass/main.scss */
.div1 {
  font-family: Braggadocio, Arial, Verdana, Helvetica, sans-serif;
}

/* line 13, ../sass/main.scss */
.div2 {
  font-family: Arial, Verdana, Helvetica, sans-serif;
}

注释语法

单行注释:

//我是单行注释

块级注释:

/*
	我是块级注释
	哈哈
*/

二者的区别是:单行注释不会出现在自动生成的css文件中。

写在最后:希望大家可以点个关注点个赞,这对up真的很重要!谢谢!

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/506775.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

1.10 类、方法、封装、继承、多态、装饰器

一、介绍类 类(class): 用来描述具有相同的属性和方法的对象的集合。它定义了该集合中每个对象所共有的属性和方法。对象是类的实例 实例化:创建一个类的实例,类的具体对象。 对象:通过类定义的数据结构实例。对象包括两个数据成员&#x…

mysql 本地电脑服务部署

前提: 下载mysql 新建配置文档 在安装mysql目录新建 my.ini [mysqld] # 设置3306端口 port3306#设置mysql的安装目录 basedirC:\Program Files\MySQL\MySQL Server 8.3 #切记此处一定要用双斜杠\\,单斜杠我这里会出错,不过看别人的教程,有…

使用Pilotfish扩展Sui执行能力

Pilotfish第一个多机智能合约执行引擎,使Sui网络的验证节点可以利用多台机器,并在负载增加时自动扩展以执行更多的交易。这一目标实现不会影响可靠性或功能完整性。 Pilotfish可以从内部执行机器的故障中恢复,并支持Sui的全面动态操作。其流…

openstack云计算(一)————openstack安装教程,创建空白虚拟机,虚拟机的环境准备

1、创建空白虚拟机 需要注意的步骤会截图一下,其它的基本都是下一步,默认的即可 ----------------------------------------------------------- 2、在所建的空白虚拟机上安装CentOS 7操作系统 (1)、在安装CentOS 7的启动界面中…

杨元庆:AI是创新者的赛跑,必须打造自研自创产品

在2024/25财年誓师大会上,联想集团董事长兼CEO杨元庆宣布公司未来十年的新使命——引领人工智能变革。在杨元庆看来,这次誓师大会吹响了联想第五个十年征程集结号:在联想稳健穿越周期、恢复增长,迎来成立40周年的里程碑时刻&#…

【嵌入式智能产品开发实战】(十二)—— 政安晨:通过ARM-Linux掌握基本技能【C语言程序的安装运行】

目录 程序的安装 程序安装的本质 在Linux下制作软件安装包 政安晨的个人主页:政安晨 欢迎 👍点赞✍评论⭐收藏 收录专栏: 嵌入式智能产品开发实战 希望政安晨的博客能够对您有所裨益,如有不足之处,欢迎在评论区提出指正&#xf…

机器学习 -- 随机森林DEMO

场景 之前看一些歌手或者演员选取节目的时候,上面不是一个评委,少则三五个,多则几十个,当做重要决定时,大家可能都会考虑吸取多个专家而不只是一个人的意见。机器学习也是一样的,机器学习中分为两种&#…

开源AI引擎:自然语言处理技术在人岗匹配中的应用

一、应用场景介绍 如何从海量的求职者中精准地匹配到合适的候选人,是每个人力资源部门都需要解决的问题。自然语言处理(NLP)技术的发展为人岗匹配提供了新的解决方案。通过信息抽取和文本分类技术,企业可以更高效地分析职位描述和…

数据结构堆

前言: 在前面我们已经学习了数据结构的基础操作:顺序表和链表及其相关内容,今天我们来学一点有些难度的知识——数据结构中的二叉树,今天我们先来学习二叉树中堆的知识,这部分内容还是非常有意思的,下面我们…

苹果App上架指南

苹果上架要求是苹果公司对于提交应用程序到苹果商店上架的要求和规定。这些要求主要是为了保证用户体验、应用程序的质量和安全性。以下是苹果上架要求的详细介绍:1. 应用程序的内容和功能必须符合苹果公司的规 苹果上架要求是苹果公司对于提交应用程序到苹果商店上…

APS54083 大功率深度调光降压恒流驱动IC PWM 线性调光 车灯IC

特点 ◆ 宽输入电压范围:5V~100V ◆ 可设定电流范围:10mA~2000mA ◆ 固定关断时间控制 ◆ 内置抖频电路,降低对其他设备的 EMI 干扰 ◆ 过温保护 ◆ 调光功能:线性调光/PWM 调光 ◆ PWM 调光深度小于…

机器学习——卷积的变种

机器学习——卷积的变种 卷积神经网络(Convolutional Neural Networks, CNNs)是深度学习领域中最重要的技术之一,它在图像处理、语音识别、自然语言处理等领域取得了巨大成功。在CNN中,卷积层是最核心的组成部分之一,…

【解决方案】荣耀系统Android8.0 system目录Read-only file system

本来以为直接把Charles证书改成系统证书格式,然后通过mt管理器root之后移动到系统证书目录就行了,结果访问baidu仍然显示网络错误,折腾一晚上。安装为用户证书,又与系统证书冲突。 手机型号:荣耀v10 EMUI&#xff1a…

ALPHA开发板上的PHY芯片驱动:LAN8720驱动

一. 简介 前面文章了解到,Linux内核是有提供 PHY通用驱动的。 本文来简单了解一下ALPHA开发板上的 PHY网络芯片LAN8720的驱动。是 LAN8720芯片的公司提供的 PHY驱动。 二. ALPHA开发板上的PHY芯片驱动:LAN8720驱动 我 们 来 看 一 下 LAN8720A 的 …

Linux系统下安装ElasticSearch

一、228环境ES使用安装 1、检验ES服务是否安装成功的方法 (1)查看Elasticsearch进程是否成功 ps -ef|grep elasticsearch (2)linux elasticsearch下访问(curl带认证访问) curl --user elastic:Zhes.13…

基于ssm的企业台账管理平台(java项目+文档+源码)

风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的企业台账管理平台。项目源码以及部署相关请联系风歌,文末附上联系信息 。 项目简介: 管理员:首页、个人…

使用argocd作为cd流程

一、前言 讲述关于argocd在cicd流程中的使用,ci这里使用gitlabjenkins流水线的方式,jenkins用于拉代码打包、构建镜像、变更yaml文件的镜像、推送变更的yaml文件到gitlab的gitops仓库中,最后再有argocd实现cd流程, 二、使用 关于…

抢占AI算力头筹,宁畅发布全局智算新战略AI算力栈

1、在以大模型为焦点的新一轮AI竞赛中,智能计算作为推动产业发展的关键引擎,已经不再局限于算力性能这一单一竞争要素。 2、算法协同优化、数据处理能力、模型可解释性以及与特定行业应用的融合度,都成为了智能计算能否成功推动技术创新和实际…

用可视化案例讲Rust编程5.用泛型和特性实现自适配绘制和颜色设置

上一节我们讲了用泛型实现返回结果,这一节我们来讲讲在函数签名里面使用泛型来对输入参数进行自适配。 先看UML设计图: 好吧,看起来有点复杂,我们一个个来解释。 首先定义的是一个生成绘图元素需要的参数结构,并且定义个特性&am…

紫外线吸收剂为光稳定剂代表产品 塑料及化妆品领域为其主要需求端

紫外线吸收剂为光稳定剂代表产品 塑料及化妆品领域为其主要需求端 紫外线吸收剂指能吸收阳光及荧光光源中的紫外线部分的一种光稳定剂。紫外线吸收剂具有热稳定性好、可吸收紫外线、化学稳定性好、能增强目标物色泽稳定性、毒性低等优势,在塑料、化妆品、纺织品、涂…