「sass软件地推」saas paas
今天给各位分享sass软件地推的知识，其中也会对saas paas进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
Iass、Pass、SasS三种云服务区别
Iass、Pass、SasS三种云服务区别
我们可以把云计算理解成一栋大楼，而这栋楼又可以分为顶楼、中间、低层三大块。那么我们就可以把Iass(基础设施)、Pass(平台)、Sass(软件)理解成这栋楼的三部分。基础设施在最下端，平台在中间，软件在顶端。别的一些“软”的层可以在这些层上面添加。
接下来我们再分别用实例给大家介绍下Iass、Sass、Pass。
IaaS：Infrastructure-as-a-Service(基础设施即服务)
第一层叫做IaaS
举例：几年扮清前如果你想在办公室或者公司的网站上运行一些企业应用，你需要去买服务器，或者别的高昂的硬件来控制本地应用，才能让你的业务正常运行。
但现在可以租用IaaS公司提供的场外服务器，存储和网络硬件。这样一来，便大大的节省了维护成本和办公场地。
PaaS：Platform-as-a-Service(平台即服务)
第二层就是所谓的PaaS
举例： PaaS公司在网上提供各种开发和分发应用的解决方案，比如虚拟服务器和操作系统。这节省了你在硬件上的费用，也让分散的工作室之间的合作变得更加容易。网页应用管理，应用设计，应用虚拟主机，存储，安全以及应用开发协作工具等。
SaaS：Software-as-a-Service(软件即服务)
第三层也就是所谓SaaS
举例：生活中，几乎我们每一天都神山在接触SaaS云服务，比如：我们平时使用的苹果手机云服务，网页中的一些云服务等。
Iaas和Paas之间的比较
PaaS的主要作用是将一个开发和运行平台作为服务提供给用户，而IaaS的主要作用是提供虚拟机或者其他资源作为服务提供给用户。接下来，将在七个方面对PaaS和IaaS进行比较：
1) 开发环境：PaaS基本都会给开发者提供一整套包括IDE在内的开发和测试环境，而IaaS方面用户主要还是沿用之前比较熟悉那套开发环境，但是因为之前那套开发环境在和云的整合方面比较欠缺，所以使用起来不是很方便。
2) 支持的应用：因为IaaS主要是提供虚拟机，而且普通的虚拟机能支持多种操作系统，所以IaaS支持的应用的范围是非常广泛的。但如果要让一个应用能跑在某个PaaS平台不是一件轻松的事，因为不仅需要确保这个应用是基于这个平台所支持的语言，而且也要确保这个应用只能调用这个平台所支持的API，如果这个应用调用了平台所不支持的API，那么就需要对这个应用进行修改。
3) 开放标准：虽然很多IaaS平台都存在一定的私有功能，但是由于OVF等协议的存在，使得IaaS在跨平台和避免被供应商锁定这两面是稳步前进的。而PaaS平台的情况则不容乐观，因为不论是Google的App Engine，还是Salesforce的Force.com都存在一定的私有API。
4) 可伸缩性：PaaS平台会自动调整资源来帮助运行于其上的应用更好地应对突发流量。而IaaS平台则需要开发人员手动对资源进行调整才能应对。
5) 整合率和经济性： PaaS平台整合率是非常高，比如PaaS的代表Google App Engine能在一台服务器上承载成千上万的应用，而普通的IaaS平台的整合率最多也不会超过100，而且普遍在10左右，使得IaaS的经济性不如PaaS。
6) 计费和监管：因为PaaS平台在计费和监管这两方面不仅达到了IaaS平台所能企及的操作系统层面，比如，CPU和内存的使用量等，而且还能做到应用层面，比如，应用的反应时间（Response Time）或者应用所消耗的事务多少等，这将提高计费和管理的精确性。
7) 学习难度：因为在IaaS上面开发和管理应用和现有的方式比较接近，而PaaS上面开发则有可能需要学一门新的语言或者新的游缺中框架，所以IaaS学习难度更低。
传统软件与SASS软件的区别
我司是专业做餐饮系统集成的，我先从商业模式、管理模式和运营模式几处简要说明一下传统软件与SaaS餐饮软件的区别，望楼主能够采纳。
目前餐饮行业面临“三高一低”（房租高、人工成本高、原材料及各项费用成本直线上升，导致利润不断降低）的普遍现象，作为帮助餐饮企业提高效率、降低成本的工具，传统的餐饮软件与互联网的SaaS餐饮软件，两者之间的差别到底有多大？
一、商业模式
传统餐饮软件，解决了既定餐饮流程下的运营效率问题，比如，电脑收银解决人工买单算账慢，点菜宝及厨房自动分单打印系统解决人工送单的低效与易出差错的问题。
SaaS餐饮软件，由于其方便的开放连接前知的特性，可以与餐厅的微信公众号、与餐饮的互联网平台外卖、团购等连接、与微信公众号连接、与网上支付平台连接，使得餐厅可以主动设计自助式点菜、支付、自助下单叫外卖、自提的模式。
这一模式有两个必要前提条件：
第一、网络连接方便快捷、非常普遍；
第二、消费者智能终端、手机非常普及，使用微信、网络支付非常普及。
自从2013年进入移动互联网时代以来，这两个前提条件基本上得到满足。
在SaaS软件可以引入消费者参与餐饮的自助点单、自助支付之后，餐饮行业实际上悄然引入了新的商业模式，这个商业模式可以类比于零售业“从百货式一对一的服务模式”向“超市式自助服务模式”的升级，一旦引入消费者的自助服务模式，餐饮行业目前困扰多时的人工成本高的问题可以得到相当程度的缓解。
目前可以说传统餐饮软件只能满足既定餐饮商业模式下运营效率问题；而SaaS餐饮软件可以协助餐饮企业利用移动互联网时代的到来，主动拥抱互联网，通过引入自助模式大大降低餐饮企业的人工成本，提升了餐饮企业的结构效率。这是两者在改善商业模式、提升企业结构效率方面的的显著差异。
二、管理模式
传统餐饮软件，由于其技术架构部署在本地服务器，对于餐饮企业而言、特别是连锁门店比较多的餐饮企业，信息的汇总与分析总是需要有一个时间周期，而面对瞬息万变的市场，这些滞后的信息带来的价值和对决策的参考意义就有限，而在一些场景下，比如及时性的产品销售预测、沽清、与调配，个性化的营销方案等，传统架构部署的技术基本无法胜任。
而SaaS餐饮软件由于其数据库和主程序部署在云端，所有的终端门店的交易数据通过互联网在云端实现互联互通，因此对于连锁企业来说，SaaS餐饮软件的一个最大优势就是实现了所有交易数据和管理数据的实时化，老板，高管们再也不需要通过传统的当日汇总、周报表、月报表来了解餐饮的经营数据，想要了解任何经营数据，只要登录手机APP账户之后，就能随时随地查看业务数据、随时做经营管理的决策。
数据的实时性和非实时性，究竟有多大的差异呢？通过一个实际案例来说明。
一个快餐店面对周边突发性的客流量大增，所备的原材料和人员都严重不足，对于这个衫悔山突发的商机，传统餐饮软件根本无能为力，因为商机往往出现在你毫无准备的情况下，事件之后的报表也只能知道当时该店所有品类全部过早的售罄，白白损失了突如其来的商机。
而SaaS的实时餐饮管理系统可以及时发现这个商机，对附近的连锁店、或者中央厨房、物流配送中心发出请求原材料和人员的支持，这样也就可以及时抓住这个不期而至的商机。
这就是实时系统和非实时系统差异的一个非常典型的业务场景。实时系统有点类似雷达的功能，时刻扫描“敌情”，能够助餐厅及时抓住“战机”，如果缺失雷达，你将会损失很多类似的“战机”。
因此有了SaaS餐饮管理系统，餐饮管理将会从事后的管理模式向事中管理模式发展，更加强调管理的实时性。
三、运营模式
传统的餐饮软件自身的封闭特性使得对经营数据的分析相对比较静态、比较狭隘；SaaS餐饮软件的互联网的开放性使得系统比较容易与生态链上的所有数据对接打通，使得SaaS餐饮软件上积累的数据具备了开展大数据分析与挖掘的价值。
当下比较成规模的餐饮连锁企业，他们的餐饮管理系统往往可以用“八国联军”来形象的比喻它们，也就是说一家餐饮企业从排队等位系统、会员系统、POS系统、供应链系统、财务系统、人事排班系统往往都是来自不同的供应商，要把所有这些系统打通，本身就不是一件轻松的事情，更不用说还有公司外部的像网络团购、网络外卖订单数据、供应链供货价格数据等，要想整合这些数据对传统或中餐饮软件来说几乎成为一件不太可能完成的任务。
而对于SaaS餐饮管理系统来说，由于互联网时代的到来、技术的进步等因素，使得提供覆盖所有餐饮业务环节SaaS管理系统正在成为现实。
以哗啦啦为例，哗啦啦就提供餐饮行业所有业务环节的一站式SaaS餐饮管理系统，从预订、排队等位、会员、自助点单、支付、与主流的网络订单平台打通、直至后台的采购、供应链系统，完全通过SaaS餐饮管理系统方式实现；而SaaS的互联网软件的开放特性使得它与网络外卖平台、团购平台、微信平台、各种网络支付平台的打通，与供应链生态上的平台打通都是非常容易实现。
因此，餐饮的运营管理会更加轻松，连锁餐饮的信息流、物流、人流、资金流，通过一套SaaS餐饮管理系统清晰可控，大数据的积累与分析与挖掘成为一件很自然的事情，智能化的餐饮管理成为可以预期的未来，餐饮管理在也不是从业人员常常挂在嘴边的所谓“勤行”，有了智能化的餐饮管理系统，一切经营管理都可以轻松搞定！
从某种意义上讲，SaaS餐饮管理系统不仅仅是餐饮企业提高效率、降低成本的工具，它还是餐饮企业转型互联网的桥梁，是餐饮企业在移动互联网时代的基础设施。
如果想进一步了解传统餐饮软件与SaaS餐软件区别请致电山西哗啦啦软件服务有限公司 ，将有专业技术人员给你讲解。电话：18103590368 18903595514
sass软件是什么意思
sass软件全称“Software as a service”，意思为“软件即服务”；它是一种软件部署模式，第三方供应商在云基础设施上构建应用程序，并以订阅的形式，通过互联网向客户提供这些应用程序，不要求客户预先建设底层基础设施。
这意味着软件可以在任何有互联网连接和网络浏览器的设备上访问，而不像传统软件那样只能在本地机器上安装。
SaaS是一种软件部署模式，第三方供应商在云基础设施上构建应用程序，并以订阅的形式，通过孝敬者互联网向客户提供这些应用程序，不要求客户预先建设底层基础设施。这意味着软件可以在任何有互联网连接和网络浏览器的设备上访问，而不像传统软件那样只能在本地机器上安装。
互联网特性：
SaaS服务通过互联网浏览器或WebServices/Web2.0程序连接的形式为用户提供服务，使得SaaS应用具备了典型互联网技术特点；另一方面，由于SaaS极大地缩短了巧薯用户与SaaS提供商之间的时空距离，从而使得SaaS服务的营销、交付与传统软件相比有着很大的不同。
比如，SaaS软件行业知名产品NetSuite所提供的在线ERP、在线CRM等模块产品都是基于网络的，这样的优势在于不必投入任何稿拦硬件费用，也不用请专业的系统维护人员就能上网，有浏览器就可以进行ERP、CRM系统的使用。快速的实施、便捷的使用、低廉的价格都有赖于SaaS产品的互联网特性。
现在sass软件有什么好做的
1、安装sass
1.安装ruby
因为sass是用ruby语言写的，所以需要安装ruby环境
打开安装包去安装ruby，记住要勾选 下面选项来配置环境路径
Add Ruby executables to your PATH
安装完成之后继续下一步操作
2.安装sass
在cmd里通过gem安装sass
gem是ruby的包管理工具，类似于nodejs 的npm
gem install sass1
这个时候如果不翻墙的话是会出问题的，因为：
由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的源，然后添加淘宝的源，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了
$ gem sources --remove
$ gem sources -a 【如果你系统肆历不支持https，请将淘宝源更换成：gem sources -a 】
$ gem sources -l
*** CURRENT SOURCES ***
# 请确保只有 ruby.taobao.org
$ gem install sass1234567
安装好之后执行sass -v就可以看到sass的版本了
实在实在不行，就安装离线文件吧,但是失败率也很高
gem install ./…/sass-3.4.22.gem
2、编译sass文件的方式
1.命令行编译
可以通过cmd命令行执行sass方法来编译
例如：
sass scss/a.scss:css/a.css1
sass 后面写要编译的sass文件的路径，‘：’后面写的是
要输出的目录及名字
需要注意的是：必须有这个文件夹才能在里面生成css
这样的话写一句执行一次编译一次有些太麻烦
可以开启一个watch来监听文件变化来进行编译
sass --watch scss:css1
–watch表示要监听 ：前后的两个都是文件夹，表示scss文件夹的文件改变就编译到css文件夹
2.其他方式编译
除了命令行工具其实还可以用考拉、gulp等工具进行编译，但是ruby和sass是必须要安装的
考拉的方式就不多做介绍了，大家i自己去看颂模一下
gulp的话呢是需要gulp-sass的模块来编译，使用方式类似于gulp-less
这里是网址，点击查看
3、sass四种风格
sass编译的格式
sass编译输出的css有四种格式
nested 嵌套
compact 紧凑
expanded 扩展
compressed 压缩
这些样式会影响输出的css的格式
简单介绍一下：
css默认输裂樱搜出的嵌套
ul{
font-size:15px;
li{
list-style:none;
}
}123456
—》
ul {
font-size: 15px; }
ul li {
list-style: none; }1234
紧凑compact
在编译的时候需要执行
sass --watch scss:css --style compact1
这个时候输出的代码就是
ul { font-size: 15px; }
ul li { list-style: none; padding: 5px; }12
compressed 压缩
在编译的时候需要执行
sass --watch scss:css --style compressed1
—
ul{font-size:15px}ul li{list-style:none;animation:all 0.4s}1
expanded 扩展
更像是平时写的css一样
在编译的时候需要执行
sass --watch scss:css --style expanded1
—
ul {
font-size: 15px;
}
ul li {
list-style: none;
animation: all 0.3s;
}1234567
compressed 压缩
更像是平时写的css一样
在编译的时候需要执行
sass --watch scss:css --style compressed1
—
.a{width:100px;height:100px;border:1px solid red}.a .b{background:red}1
4、sass与scss
sass的两个语法版本
sass一开始用的是一种缩进式的语法格式
采用这种格式文件的后缀名是.sass
在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法
两个版本的区别
后缀名不同 .sass和.scss
语法不同，请看下面
新版：
/*新版本
多行文本注释*/
//新版本
//单行文本注释
@import "base";
@mixin alert{
color:red;
background:blue;
}
.alert-warning{
@include alert;
}
ul{
font-size:15px;
li{
list-style:none;
}
}123456789101112131415161718
老版本：
/*新版本
多行文本注释
//新版本
单行文本注释
@import "base"
=alert
color:red
background:blue
.alert-warning
+alert
ul
font-size:15px
li
list-style:none1234567891011121314
5、变量、嵌套、混合、继承拓展
变量的意义
在sass里我们可以定义多个变量来存放颜色、边框等等的样式，这样就可以在下面想要使用样式的时候使用变量了
这样的优点就是便于维护，更改方便
变量的使用
可以通过$来定义变量，在变量名字中可以使用-和_来作为连接，并且-和_是可以互通的，就是用起来一模一样。
变量的值可以是字符串、数字、颜色等等，在变量里还可以使用其他变量，使用的时候直接写变量名就好了
例如
$primary-color:#ff6600;
$primary-border:1px solid $primary_color;
div.box{
background:$primary-color;
}
h1.page-header{
border:$primary-border;
}12345678
—》
div.box {
background: #ff6600;
}
h1.page-header {
border: 1px solid #ff6600;
}123456
嵌套的使用
合理的使用嵌套语法，可以使我们编写代码更为快捷
假设我们想写这样的css：
.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}1234567891011
在sass里我们可以这样写
.nav{
height:100px;
ul{
margin:0;
li {
float:left;
list-style:none;
padding:5px;
}
}
}1234567891011
大家会发现，写出来的代码父和子之间都有空格隔开，如果我们需要给a加上伪类的话我们这样写
.nav{
height:100px;
a{
color:#fff;
:hover{
color:#ff6600;
}
}
}123456789
在里面就会出现这样的情况
.nav a :hover {
color: #ff6600;
}123
我们发现在a和:hover之间有了空格，这样是不好的，所以我们需要在写的时候在：hover之前把a加上，这样就需要用到在之类里引用父类选择器的方式，我们可以用符号代替父类
例如：
.nav{
height:100px;
a{
color:#fff;
:hover{
color:#ff6600;
}
}
}123456789
这样就好了，下面来个完整的代码：
.nav{
height:100px;
ul{
margin:0;
li{
float:left;
list-style:none;
padding:5px;
}
a{
display:block;
color:#000;
:hover{
color:#f60;
background:red;
}
}
}
-text{
font-size:15px;
}
}12345678910111213141516171819202122
-----》
.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
.nav ul a {
display: block;
color: #000;
}
.nav ul a:hover {
color: #f60;
background: red;
}
.nav .nav-text {
font-size: 15px;
}12345678910111213141516171819202122
嵌套属性
我们可以把一些个复合属性的子属性来嵌套编写，加快编写速度，例如
body{
font:{
family:Helvitica;
size:15px;
weight:bold;
}
}
.nav{
border:1px solid red{
left:none;
right:none;
}
}
.page-next{
transition:{
property:all;
delay:2s;
}
}12345678910111213141516171819
-----》
body {
font-family: Helvitica;
font-size: 15px;
font-weight: bold;
}
.nav {
border: 1px solid red;
border-left: none;
border-right: none;
}
.page-next {
transition-property: all;
transition-delay: 2s;
}1234567891011121314
mixin 混合
你可以把它想象成一个有名字的定义好的样式
每一个mixin都有自己的名字，类似于js里的函数定义方法如下
@mixin 名字(参数1，参数2...){
...
}123
使用方法是在其他选择器css样式里通过@include引入，其实就相当于将mixin里的代码写入到这个选择器的css里，如下：
@mixin alert {
color:#f60;
background-color:#f60;
a{
color:pink;
}
-a{
color:red;
}
}
.alert-warning{
@include alert;
}12345678910111213
-----》
.alert-warning {
color: #f60;
background-color: #f60;
}
.alert-warning a {
color: pink;
}
.alert-warning-a {
color: red;
}12345678910
刚才是没有参数的mixin，mixin也可以拥有参数，需要注意的是：
形参的名字前要加$
传参的时候只写值的话要按顺序传
传参的时候不想按顺序的话需要加上形参名字
例如：
@mixin alert($color,$background) {
color:$color;
background-color:$background;
a{
color:darken($color,10%);//把颜色加深百分之十
}
}
.alert-warning{
@include alert(red,blue);
}
.alert-info{
@include alert($background:red,$color:blue);
}12345678910111213
------》
.alert-warning {
color: red;
background-color: blue;
}
.alert-warning a {
color: #cc0000;
}
.alert-info {
color: blue;
background-color: red;
}
.alert-info a {
color: #0000cc;
}1234567891011121314
继承拓展 extend
如果我们有一个选择器想要拥有另一个选择所有的东西，不管是样式还是子元素等等，可以使用@extend来继承
大家需要注意的是，++b继承a的时候，a的子元素设置了样式，也会给b的子元素设置样式++，达到完全一样的情况，例如：
.alert {
padding:5px;
}
.alert a {
font:{
weight:bold;
size:15px;
}
}
.alert-info {
@extend .alert;
backgournd:skyblue;
}12345678910111213
----》
.alert, .alert-info {
padding: 5px;
}
.alert a, .alert-info a {
font-weight: bold;
font-size: 15px;
}
.alert-info {
backgournd: skyblue;
}12345678910
partials
在以前咱们编写css的时候，一个css引入另一个css需要使用@import，其实这是不好的，会多发一次http请求，影响咱们站点的响应速度。
在sass里，咱们可以把小的sass文件分出去，叫做partials，在某个sass里通过@import ‘partials名’去引入，注意路径哟，这样的话就可以把partials里的代码引到咱们大的sass里一起编译
需要注意的是 partials的文件名前要加_
_base.sass :
body{
margin:0;
padding:0;
}1234
style.sass :
@import "base";
.alert {
padding:5px;
}
.alert a {
font:{
weight:bold;
size:15px;
}
}
.alert-info {
@extend .alert;
backgournd:skyblue;
}1234567891011121314
-----------
body {
margin: 0;
padding: 0;
}
.alert, .alert-info {
padding: 5px;
}
.alert a, .alert-info a {
font-weight: bold;
font-size: 15px;
}
.alert-info {
backgournd: skyblue;
}1234567891011121314
这样的话我们就可以把模块化的思想引入到sass里了
comment注释
sass里的注释有三种
多行注释
单行注释
强制注释
多行注释：压缩后不会出现在css里 /* /
单行注释: 不会出现在css里 //
强制注释：压缩后也会出现在css里 /! */
6、数据类型与函数
数据类型
在sass里有数字、字符串、列表、颜色等类型
在cmd里 输入
sass -i1
就会进入到交互模式，输入的计算可以马上得到结果
type-of()可以用来得到数据类型，如：
type-of(5) - number1
注意数字类型的可以包含单位，如：
type-of(5px) - number1
字符串类型：
type-of(hello) - string
type-of('hello') - string12
list类型：
type-of(1px solid red) - list
type-of(5px 10px) - list12
颜色：
type-of(red) - color
type-of(rgb(255,0,0) - color
type-of(#333) - color123
number 计算
2+9 -》10
2*8 -》16
(8/2) -4 //除法要写括号123
也可以包含单位
5px + 5px - 10px
5px -2 -3px
5px *2 -10px
5px * 2px -10px*px //这样就不对了哟
（10px/2px） - 5//除法单位取消
3+2*5px-13px123456
好吧，都是一些小学的数学题，很简单对吧
处理数字的函数
绝对值
abs(10) - 10;
abs(10px) - 10px;
abs(-10px) - 10px;123
四舍五入相关
round(3.4)-3 //四舍五入
round(3.6)-4
ceil(3.2)-4 //向上取整
ceil(3.6)-4
floor(3.2)-3 //向下取整
floor(3.9)-3
percentage(600px/1000px) -65% //百分之
min(1,2,3) - 1 //最小值
max(2,3,4,5) - 5 //最大值123456789
字符串相关
//带引号和不带引号的字符串想加为带引号的字符串
"a" + b -"ab"
a + "b" -"ab"
//字符串+数字
"ab" + 1 -"ab1"
//字符串 - 和 / 字符串
"a" - b -"a-b"
"a" / b -"a/b"
//注意字符串不能相乘123456789
字符串函数
大写：
$word:"hello";
to-upper-case($word) - "HELLO"12
小写：
$word:"Hello";
to-lower-case($word) - "hello"12
得到length：
$word:"Hello";
str-length($word) - 512
得到字符串在字符串里的位置：
$word:"Hello";
str-index($word,"el") - 212
字符串中插入字符串：
$word:"Hello";
str-insert($word,"aa",2) - "Haaello"12
颜色相关
在sass里除了关键字、十六进制、rgb和rgba之外还有一种颜色是HSL
分别表示的是 色相 0-360（deg） 饱和度 0-100% 明度 0-100%
例如：
body {
background-color:hsl(0,100%,50%);
}
-》
body {
background-color: red;
}1234567
body {
background-color:hsl(60,100%,50%);
}
-》
body {
background-color: yellow;
}1234567
也可以有透明哟
body {
background-color:hsl(60,100%,50%，0.5);
}
-》
body {
background-color: rgba(255,255,0,0.5);
}1234567
颜色函数
lighten函数和darken函数可以把颜色加深或减淡，即调整明度，第一个参数为颜色，第二个参数为百分比，例如：
$color:#ff0000;
$light-color:lighten($color,30%);
$dark-color:darken($color,30%);
.a{
color:$color;
background:$light-color;
border-color:$dark-color;
}12345678
—》
.a {
color: #ff0000;
background: #ff9999;
border-color: #660000;
}12345
saturate和desaturate函数可以调整颜色的纯度
$color:hsl(0,50%,50%);
$saturate-color:saturate($color,50%);
$desaturate-color:desaturate($color,30%);
.a{
color:$color;
background:$saturate-color;
border-color:$desaturate-color;
}12345678
–》
.a {
color: #bf4040;
background: red;
border-color: #996666;
}12345
用transparentize来让颜色更透明
用opatify来让颜色更不透明
$color:rgba(255,0,0,0.5);
$opacify-color:opacify($color,0.3);
$transparentize-color:transparentize($color,0.3);
.a{
color:$color;
background:$opacify-color;
border-color:$transparentize-color;
}12345678
—》
.a {
color: rgba(255, 0, 0, 0.5);
background: rgba(255, 0, 0, 0.8);
border-color: rgba(255, 0, 0, 0.2);
}12345
列表类型
在sass里，用空格或者逗号隔开的值就是列表类型
如：
1px solid red
Courier,microsoft yahei12
列表函数
sass里的列表类似与数组
获取列表的长度
length(5px 10x) 2
获取列表中的第几个元素
nth(5px 10px,2) 10px
获取一个元素在一个列表里的下标
index(1px solid red,solid) 2
给列表里加入新的元素
append(5px 10px,5px) 5px 10px 5px
连接两个列表
join(5px 10px,5px 0) 5px 10px 5px 012345678910
map类型
sass里的map类型类似与js里的object
$map:(key1:value1,key2:value2,key3:value3);1
map 函数
//定义一个map
$color:(light:#ffffff,dark:#000000);
//获取map 的length
length($color) -2
//得到map里key对应的值
map-get($color,dark) -#000000
获取map里的所有键的列表
map-keys($color) -("light","dark") //列表类型
获取map里的所有值的列表
map-values($color) - ("#ffffff","#000000") //列表类型
判断map里是否含有这个key
map-has-key($color,light) -true
给map里添加键值对
map-merge($color,(light-gray:#cccccc))
-(light:#ffffff,dark:#000000,light-gray:#cccccc)
移除map里的某个键值对
map-remove($colors,light) -(dark:#000000,light-gray:#cccccc)1234567891011121314151617
boolean类型
在sass里通过 比较得到的值就是布尔值 true 和false
5px3px - true
5px2px - false12
在sass里也可以有或 且 非
且：
(5px 3px) and (5px 2px) - false
(5px 3px) and (5px 2px) - true12
或：
(5px 3px) or (5px 2px) - true
(5px 3px) and (5px 2px) - false12
非：
not(5px3px) - false1
interpolation
在sass里可以通过interpolation的方式来在变量名和属性名上拼接变量值，例如
$name:"info";
$attr:"border";
.alert-#{$name}{
#{$attr}-color:red;
}12345
----
.alert-info {
border-color: red;
}123
7、分支结构、循环结构、函数
分支结构
在sass里，可以使用@if让我们根据一些条件来应用特定的样式
结构：
@if 条件 {
}123
如果条件为真的话，括号里的代码就会释放出来
例如：
$use-refixes:true;
.rounded{
@if $use-refixes {
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
}
border-radius:5px;
}12345678910
—
.rounded {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}1234567
如果是另外一种情况
$use-refixes:false;1
—》
.rounded {
border-radius: 5px;
}123
if else在sass里的写法是：
body{
@if $theme == dark {
background:black;
} @else if $theme == light {
background:white;
} @else {
background:gray;
}
}123456789
for循环
在sass里的for循环是这样的
@for $var form 开始值 through 结束值 {
...
}123
还有一种是
@for $var form 开始值 to 结束值 {
...
}123
注意，开始值和结束值的关系可以是升序也可以是倒序，但是每次只能+1或者-1
这两种有什么区别呢？
区别就是 from 1 to 4 的话是执行三次，i的变化是 1 2 3
from 1 through 4 的话是执行四次，i的变化是 1 2 3 4
如：
from to
$columns:4;
@for $i from 1 to $columns{
.col-#{$i}{
width:100% / $columns * $i;
}
}123456
—》
.col-1 {
width: 25%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 75%;
}123456789
from through
$columns:4;
@for $i from 1 through $columns{
.col-#{$i}{
width:100% / $columns * $i;
}
}123456
—
.col-1 {
width: 25%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 75%;
}
.col-4 {
width: 100%;
}123456789101112
each 遍历list类型
在sass里可以利用each方法来遍历咱们的list类型的数据
list类型在js里类似于数组，那么each类似于for in遍历，结构如下：
@each $item in $list{
...
}123
例如：
$colors:success error warning;
$map:(success:green,warning:yellow,error:red);
@each $color in $colors{
.bg-#{$color}{
background:map-get($map,$color);
}
}1234567
—
.bg-success {
background: green;
}
.bg-error {
background: red;
}
.bg-warning {
background: yellow;
}123456789
@while 循环
在sass里，拥有@while循环，比@for会更好用一些,@for循环只能从一个数到另一个数变化之间执行，每次变化都是1，while设置循环结构的话更为灵活；
结构：
@while 条件{
}123
eq：
$i:6;
@while $i0{
.item-#{$i}{
width:$i*5px;
}
$i:$i - 2;
}1234567
注意：$i - 2 需要用空格隔开哟
---------》
.item-6 {
width: 30px;
}
.item-4 {
width: 20px;
}
.item-2 {
width: 10px;
}123456789
自定义函数
在sass里也可以定义函数，并且也可以有返回值
结构：
@function 名称 (参数1，参数2){
@return ...
}123
例如，我们做一个返回map里key对应的值的函数：
$colors:(light:#ffffff,dark:#000000,gray:#555555);
@function color($key){
@return map-get($colors,$key);
}
body{
background:color(light);
color:color(dark);
border-color:color(gray);
}123456789
—》
body {
background: #ffffff;
color: #000000;
border-color: #555555;
}
关于sass软件地推和saas paas的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。