现在sass软件有啥好做的

Posted 2023-05-04

参考技术A

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命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https，请将淘宝源更换成：gem sources -a http://gems.ruby-china.org】
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 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


—>

ulfont-size:15pxul lilist-style:none;animation:all 0.4s1


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


—>

.awidth:100px;height:100px;border:1px solid red.a .bbackground:red1


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

5px>3px -> true
5px<2px -> 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(5px>3px) -> 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 $i>0
      .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;

监控tomcat运行情况，有啥好的工具

tomcat作为使用非常广泛的web容器，确实给我们带来了很多帮助，就像任何软件系统一样，一旦正式投入生产环境，那监控手段就不可或缺。如何有效的监控tomcat的运行情况，尤其是在复杂IT环境下就更显得迫切了，如tomcat集群部署；1、单点tomcat的监控到底一个tomcat服务我们应该监控哪些指标呢？每个人可能都有不同的见解，但下面这些指标是基本的：.JVM可用内存情况：可用内存一定不能太小，否则直接影响tomcat的处理性能.响应时间：该指标直接反映tomcat响应用户请求的速度.线程池使用情况：线程池的使用情况能直接反映tomcat的工作负荷.Web请求处理情况：这里应该关注网站访问量、处理一次请求的最大耗时等几个关键指标.网站流量：这里应该关注每分钟的出、入流量，而不是总流量，总流量的监控价值不大，因为总流量反映的是tomcat自启动以来所有的流量和，哪怕它达到100G都没关系，因为这可能是过去三个月的总流量。EOMP作为一个IT监控平台，提供了很多实用功能来帮助用户有效的运维各种IT资源，下面我们就如何通过EOMP对tomcat进行有效监控做一个详细介绍：EOMP里tomcat的详细监控界面如下：上图中做标记的5个地方，都是EOMP反映给用户的重要监控信息，如‘响应时间’、‘可用内存’、‘正在运行线程数’、‘处理一次请求最长时间’，它们都可以反映出tomcat的运行情况，同时EOMP还能提供tomcat上部署的每个应用的监控信息，如下图所示：通过对这些关键指标进行阀值、故障通知等设置，就可以在严重问题出现前有效的进行处理。EOMP阀值的设置很简单，在图中任何一个做标记的监控指标处，点击[size=medium]鼠标右键弹出菜单，进行相关设置，如我们想对‘处理一次请求最长时间’这个指标进行如下设置：在上午8:00－下午6:00间，任意5分钟内，该指标至少有3次超过10秒，就发出问题级别的告警，并通过Email、手机短信等方式通知相关人员；下面是具体阀值和故障通知设置截图：并且如果‘处理一次请求最长时间’确实发生了故障，我们可以通过刚才弹出菜单中的‘历史数据查询’功能，对这个监控指标的所有历史数据进行故障分析，下图是一次查询结果：2、集群tomcat的监控对于复杂的集群tomcat，就应该把它们通过某种方式放到一起来共同运维和监控，EOMP提供的‘视图’功能，就能很好完成这个任务，下图是EOMP一个简单tomcat集群的‘监控视图’：上图中，我们把集群的两个tomcat服务放到一张视图里，同时把它们的一些关键监控指标也放到这张视图里，如最近一分钟接收、发送byte数等，通过这样一张视图，用户可以把所有反映这个tomcat集群健康情况的监控信息都放到一起，这在很大程度上方便用户的监控。EOMP是以‘视图’为其设计核心，所以它的视图配置非常灵活，既可以是整个一个tomcat服务，也可以是某个tomcat服务的一个监控指标。越是复杂的监控要求，越是能体现出这种内在设计的灵活性。‘视图’不仅仅是个展现的窗口，它是个监控实体，如下图EOMP的首页所示，任何故障信息都是以‘视图’为载体的，这样用户在任何时候都可以看到自己能理解的监控信息，而不是什么什么设备或服务等。下面是首页的截图： 参考技术A visual vm 远程监控 tomcat
dump内存信息

或者kill -3 pid (tomcat的）
分析线程情况 那些线程如果很长时间没有释放
可能 能看到出错的代码 参考技术B 步想实现对后台服务软件tomcat和nginx服务的监控...重启后最好能再向指定邮箱发一邮件(若该邮箱开通了...配置之比后可以运行tomcatmoni.exe开始执行监控,