爆肝三天，学习Scss-看这篇就够了

前言

今时不同往日，能叫我们切图仔的只能是我们自己！

爆肝三天，学习Scss-看这篇就够了_第1张图片

在JavasScrip框架满天飞的年代，前端三板斧之一的CSS也前前后后涌出Sass、Less 、Stylus等多款CSS预处理框架。

今天我们要讲的就是其中的的老大哥Sass的升级版Scss，Scss给我们提供了变量 、循环 、继承 、混入、函数等一系列强大的功能以方便我们开发。

以前觉得Scss简单，后来发现，简单是真的简单，我菜也是真的菜

如果文章对你有帮助的话，记得一键三连哟。有问题和疑惑的话也可以在评论区留言。我会第一时间回复大家，如果觉得我的文章哪里有知识点错误的话，也恳请能够告知，把错的东西理解成对的，无论在什么行业，都是致命的。

日常博客记录在语雀，欢迎关注 语雀文档。

Scss和Sass

Sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的CSS代码，这一代的Sass也被称为Scss。

文档

单文件编译可以在下面的网站进行操作，多文件编译见下下节，中文文档缺失的东西挺多的，有条件的可以翻看英文文档。

Sass版本

Sass有三个版本Dart Sass、libsass和Ruby Sass：

  1. Dart Sass，用Dart语言写的sass实现，于2016年11月1日发布alpha版本，版本1.23.0之后完全支持模块化机制。
  2. libSass也就是俗称的node-sass，用c/c++实现的sass版本，使用非常广泛。 node-sass是绑定了 libsass的nodejs库，可以极快的将.scss 文件编译为.css文件，这个安装过程……，懂的都懂，官方也不推荐再使用了。
  3. Ruby Sass，是最初的Sass实现，但是2019年3月26日被停止了，以后也不会再支持，使用者需要迁移到别的实现上。

环境配置

中文文档的安装教程是Ruby Sass，个人推荐使用npm安装Dart Sass，这也是官方推荐的方式。

全局安装

npm默认安装的是Dart Sass了。

npm install -g sass

项目结构

code
    --css
        --index.scss
    --dist

监听运行

使用命令行操作，监听文件夹下的scss文件并输出为css文件，如果是webpack项目，则需要使用sass-loader。

sass --style=expanded  -w css:dist --no-source-map

Live Sass Compiler

如果你使用的VSCode的Live Sass Compiler插件，可以参考我的配置，这个插件用的 Sass版本是LibSass3.5.4，对有些指令存在兼容性和不支持的情况。

"liveSassCompile.settings":{
        "generateMap":false,
        "formats":[
            {
                "format": "expanded",
                "savePath": "~/css/",
            }
        ]
}

爆肝三天，学习Scss-看这篇就够了_第2张图片

输出格式

嘿嘿，下面正文术语都同统一改为小写哈。
scss提供了四种输出格式，在命令行中使用 --style 选项进行设置，在Live Sass Compiler中配置format参数。

注：dart sass只支持expanded和compressed。

sass --watch style.scss:style.css --style compressed

:nested

nested是 scss默认的输出格式，选择器与属性等单独占用一行，缩进量与 scss文件中一致，每行的缩进量反映了其在嵌套规则内的层数。

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.p {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

:expanded

expanded输出像是我们平常手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.p {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:compact

compact会将每条 css 规则归纳为一行。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.p { font-size: 10em; font-weight: bold; text-decoration: underline; }

:compressed

compressed会删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。

#main{color:#fff;background-color:#000}#main p{width:10em}.p{font-size:10em;font-weight:bold;text-decoration:underline}

语法嵌套规则

选择器嵌套

css中重复写选择器是非常恼人的。尤其是html结构嵌套非常深的时候，scss的选择器嵌套可以避免重复输入父选择器，可以有效的提高开发效率，减少样式覆盖可能造成的异常问题。这也是我们最常用的功能。很多人用scss就只用了这个功能，然后觉得自己会了。

这个是正常的css结构

.container {
    width: 1200px;
    margin: 0 auto;
}
.container .header .img {
    width: 100px;
    height: 60px;
}

编译成scss的样子，子元素向父元素内部嵌套了。

.container {
    width: 1200px;
    margin: 0 auto;
    .header {
        .img {
            width: 100px;
            height: 60px;
        }
    }
}

属性嵌套

有些css属性遵循相同的命名空间 (相同的开头)，比如font-family，font-size，font-weight都以font作为属性的命名空间。为了便于管理这样的属性，也为了避免重复输入。（这个编辑器提示有点不太理想……，不是很好用）。

.container {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译成css

.container {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

命名空间也可以包含自己的属性值

.container {
  color: red {
    adjust: fantasy;
  }
}

编译成css

.container {
  color: red;
  color-adjust: fantasy;
}

父选择器&

在嵌套 css规则时，有时会需要使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，可以用& 代表嵌套规则外层的父选择器，scss在编译时会把&替换成父选择器名。

案例里面的&表示的就是父级a选择器

.container {
    a {
        color: #333;
        &:hover {
             text-decoration: underline;
             color: #f00;
        }
    }
}

转化成scss

.container a {
    color:#333;
}
.container a:hover {
    text-decoration:underline;
    color:#F00;
}

换个思路，也可以使用&进行选择器名称拼接。

.main {
    color: black;
    &-sidebar { border: 1px solid; }
}

转化成css

.main {
    color: black;
}
.main-sidebar {
    border: 1px solid;
}

Scss的两种注释

多行注释/* ... */

多行注释会编译到.css文件中,compressed（压缩）模式下除外， 将 !作为多行注释的第一个字符表示在压缩输出模式下也保留这条注释，通常用于添加版权信息。

/*!
* 我是
* 多行
* 注释
*/
body { color: black; }

编译成css

/*!
* 我是
* 多行
* 注释 
*/body{color:#000}

单行注释//

单行注释不会编译到.css文件

// 我是单行注释
body { color: black; }

编译成css

body {
  color: black;
}

变量

使用

原生css中的变量，使用--变量名:变量值定义，var(--变量名)进行使用。

:root {
    --color: #F00;
}
p {
    color: var(--color);
}

scss中的变量，以美元符号$开头，赋值方法与 css属性的写法一样。

$color:#F00;
p {
    color: $color;
}

转行成css

p {
    color: #F00;
}

5条变量规则

下文的mixin和function命名也遵循1234条规则：

  1. 变量以美元符号$开头，后面跟变量名；
  2. 变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）；
  3. 通过连接符-与下划线_定义的同名变量为同一变量；
  4. 变量一定要先定义，后使用；
  5. 写法同css，即变量名和值之间用冒号:分隔；

2种变量作用域

  1. 变量作用域分为全局变量域和局部变量域：

    • 全局变量：声明在最外层的变量，可在任何地方使用；
    • 局部变量：嵌套规则内定义的变量只能在嵌套规则内使用。
  2. 将局部变量转换为全局变量可以添加!global 声明。
$color: red;
.container {
    $height: 500px;
    $font-size: 16px !global;
    font-size: $font-size;
    color: $color;
    height: $height;
}
.footer {
    /**$font-size使用!global 申明成全局变量了*/
    font-size: $font-size; 
    /**
    * Error: Undefined variable. 
    * $height是.container下的局部变量，无法在.footer下面编译
    */
    height:$height;
}

编译成css

.container {
    font-size: 16px;
    color: red;
    height: 500px;
}

.footer {
     /**$font-size使用!global 申明成全局变量了*/
    font-size: 16px;
}

7种主要的数据类型

scss支持7种主要的数据类型：

  1. 数字，1rem、2vh、13、 10px；
  2. 字符串，分有引号字符串与无引号字符串，"foo"、 'bar'、baz；
  3. 颜色，blue, #04a3f9, rgba(255,0,0,0.5)；
  4. 布尔型，true和false；
  5. 空值，null是其类型的唯一值。表示缺少值，通常由函数返回以表示缺少结果；
  6. 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em,Helvetica,Arial,sans-serif；
  7. maps， 相当于 JavaScript 的 object，(key1: value1, key2: value2)；

官网中把Function也当作一种类型，点击原文了解。

$layer-index: 10;
$border-width: 3px;

$font-weight: bold;

$font-base-family: "Open Sans", Helvetica, Sans-Serif;
$block-base-padding: 6px 10px 6px 10px;

$top-bg-color: rgba(255, 147, 29, 0.6);

$blank-mode: true;

$var: null;

$fonts: (
  serif: "Helvetica Neue",
  monospace: "Consolas",
);

.container {
  font-family: $font-base-family;
  font-size: $font-size;
  padding: $block-base-padding;

  @if $blank-mode {
    background-color: #000;
  } @else {
    background-color: #fff;
  }

  content: type-of($var);
  content: length($var);
  color: $top-bg-color;
}

// 如果列表中包含空值，则生成的CSS中将忽略该空值。
.wrap {
  font: 18px $font-weight map-get($fonts, "sans");
}

编译成css

.container {
  font-family: "Open Sans", Helvetica, Sans-Serif;
  font-size: 16px;
  padding: 6px 10px 6px 10px;
  background-color: #000;
  content: null;
  content: 1;
  color: rgba(255, 147, 29, 0.6);
}

.wrap {
  font: 18px bold; // 如果列表中包含空值，则生成的CSS中将忽略该空值。
}

scss属性也支持其他值，比如Unicode字符集，或!important 声明。但是scss 不会特殊对待这些属性值，一律视为无引号字符串。

$color:red;
.container {
    color:$color !important;
}

编译成css

.container {
  color: red !important;
}

!default

可以在变量的结尾添加!default来给变量设置默认值，有点类似Javascript的逻辑运算符let content=content || "Second content"。注意，变量是 null时将视为未被!default赋值。

$content: "First content";
// 如果$content之前没定义就使用如下的默认值
$content: "Second content" !default;
#main {
    content: $content;
}

编译成css

#main {
  content: "First content";
}

圆括号

圆括号()可以用来影响运算的顺序，和数学中的效果是一致的。

运算符

相等运算==和不相等运算!=。所有数据类型均支持 == 和!=，另外，每种数据类型也有其各自支持的运算方式。

$theme:"blue";

.container {
    @if $theme=="blue" {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

.container {
    @if $theme !="blue" {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

编译为css

.container {
  background-color: red;
}

.container {
  background-color: blue;
}

关系运算符

四个关系运算符< > >= <=

$theme:3;
.container {
    @if $theme >= 5 {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

编译为css

.container {
    background-color: blue;
}

布尔运行符

三个布尔运算符and or not

$width: 100;
$height: 200;
$last: false;
div {
  @if $width>50 and $height<300 {
    font-size: 16px;
  } @else {
    font-size: 14px;
  }
  @if not $last {
    border-color: red;
  } @else {
    border-color: blue;
  }

  @if $width>500 or $height<300{
    line-height: 20px;
  } @else {
    line-height: 50px;
  }
}

编译为css

div {
    font-size: 16px;
    border-color: red;
    line-height: 20px;
}div {
    font-size: 16px;
    border-color: red;
}

数字操作符

+ - * / %

/* 纯数字与百分号或单位运算时会自动转化成相应的百分比与单位值 */
.container {
    /* ================== + 运算===================== */
    width: 50 + 20;
    width: 50 + 20%;
    width: 50% + 20%;
    width: 10pt + 20px;
    width: 10pt + 20;

    /* ================== - 运算===================== */
    height: 50 - 20;
    height: 10 - 20%;
    height: 50pt - 20px;

    /* ================== * 运算===================== */
    height: 50 * 30;
    height: 10 * 30%;
    height: 50 * 2px;
    height: 50pt * 4;

    /* ==================/ 运算 (除完后最多只能保留一种单位)===================== */
    $width: 100px;
    width: 10/5;
    width: 10px / 5px;
    width: 10px / 20;
    width: ($width/2); // 使用变量与括号
    height: (500px/2); // 使用了括号

    /* ==================% 求余运算===================== */
    width: 10 % 3;
    width: 50px % 7;
    width: 50% % 7;
}

编译成css

/* 纯数字与百分号或单位运算时会自动转化成相应的百分比与单位值 */
.container {
    /* ================== + 运算===================== */
    width: 70;
    width: 70%;
    width: 70%;
    width: 25pt;
    width: 30pt;
    /* ================== - 运算===================== */
    height: 30;
    height: -10%;
    height: 35pt;
    /* ================== * 运算===================== */
    height: 1500;
    height: 300%;
    height: 100px;
    height: 200pt;
    /* ==================/ 运算 (除完后最多只能保留一种单位)===================== */
    width: 10/5;
    width: 10px/5px;
    width: 10px/20;
    width: 50px;
    height: 250px;
    /* ==================% 运算===================== */
    width: 1;
    width: 1px;
    width: 1%;
}

/在css中有分隔数字的用途，在scss中，以下三种情况会进行除法运算：

  1. 如果值或值的一部分，是变量或者函数的返回值；
  2. 如果值被圆括号包裹；
  3. 如果值是算数表达式的一部分。
$width: 1000px;
div {
    font: 16px/30px Arial, Helvetica, sans-serif; // 不运算
    width: ($width/2); // 使用变量与括号
    width: (#{$width}/2); // 使用 #{} 插值语句将变量包裹，避免运算。
    z-index: round(10)/2; // 使用了函数
    height: (500px/2); // 使用了括号
    margin-left: 5px + 8px/2px; // 使用了+表达式
}

编译成css

div {
    font: 16px/30px Arial, Helvetica, sans-serif;
    width: 500px;
    width: 1000px/2;
    z-index: 5;
    height: 250px;
    margin-left: 9px;
}

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 css文件中，只需要用 #{} 插值语句将变量包裹。

字符串运算

  1. +可用于连接字符串；
  2. 如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的；
  3. 无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
.container {
    content: "Foo " + Bar;
    font-family: sans- + "serif";
}

编译为css

.container {
    content: "Foo Bar";
    font-family: sans-serif;
}

插值语句

文章上面有讲到插值语句，这里来解释一下。\
通过 #{} 插值语句可以在选择器、属性名、注释中使用变量，使用#{}插值语句将变量包裹起来即可，和js中的模板字符串很像。

$font-size: 12px;
$line-height: 30px;
$class-name: danger;
$attr: color;
$author: "福大命大";

p {
    font: #{$font-size}/#{$line-height} Arial Helvetica, sans-serif;
}

/* 
* 这是文件的说明部分
* @author: #{$author}
*/

a.#{$class-name} {
    border-#{$attr}: #f00;
}

编译成css

p {
    font: 12px/30px Arial Helvetica, sans-serif;
}

/* 
* 这是文件的说明部分
* @author: 福大命大
*/
a.danger {
    border-color: #f00;
}

流程控制

sass中流程控制包含四类，也是我们在js中常见的@if、@for、@each、@while。

@if

@if语法和js类似，基本格式是@if...@else if...@else。

使用

$theme:3;
.container {
    @if $theme >= 5 {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

编译为css

.container {
    background-color: blue;
}

案例

这里已一个利用mixin和if封装一个三角形生成，mixin知识后面又讲到。

爆肝三天，学习Scss-看这篇就够了_第3张图片

@mixin triangle($direction:top, $size:30px, $border-color:black) {
  width: 0px;
  height: 0px;
  display: inline-block;
  border-width: $size;
  border-#{$direction}-width: 0;
  @if ($direction==top) {
     border-color: transparent transparent $border-color transparent;
     border-style: dashed dashed solid dashed;
  }
  @else if($direction==right) {
     border-color: transparent transparent transparent $border-color;
     border-style: dashed dashed dashed solid;
  }
  @else if($direction==bottom) {
     border-color: $border-color transparent transparent transparent;
     border-style: solid dashed dashed dashed;
  }
  @else if($direction==left) {
     border-color: transparent $border-color transparent transparent;
     border-style: dashed solid dashed dashed;
  }
}
.p0 {
     @include triangle($size:50px);
}

.p1 {
     @include triangle(right, 50px, red);
}

.p2 {
    @include triangle(bottom, 50px, blue);
}

.p3 {
     @include triangle(left, 50px, green);
}

编译为

.p0 {
    width: 0px;
    height: 0px;
    display: inline-block;
    border-width: 50px;
    border-top-width: 0;
    border-color: transparent transparent black transparent;
    border-style: dashed dashed solid dashed;
}

.p1 {
    width: 0px;
    height: 0px;
    display: inline-block;
    border-width: 50px;
    border-right-width: 0;
    border-color: transparent transparent transparent red;
    border-style: dashed dashed dashed solid;
}

.p2 {
    width: 0px;
    height: 0px;
    display: inline-block;
    border-width: 50px;
    border-bottom-width: 0;
    border-color: blue transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}

.p3 {
    width: 0px;
    height: 0px;
    display: inline-block;
    border-width: 50px;
    border-left-width: 0;
    border-color: transparent green transparent transparent;
    border-style: dashed solid dashed dashed;
}

@for

for在条件范围内重复操作，这个指令包含两种格式：

  1. @for $var from through ；
  2. @for $var from to 。

两者区别在于 through 与 to 的含义：

  1. 使用 through时，条件范围包含 与 的值；
  2. 使用 to时条件范围只包含的值不包含的值；
  3. $var 可以是任何变量，比如$i， 和 必须是整数值。
@for $i from 1 to 3 {
  #loading span:nth-child(#{$i}) {
      width: 20 * ($i - 1) + px;
  }
}

编译为

#loading span:nth-child(1) {
    width: 0px;
}

#loading span:nth-child(2) {
    width: 20px;
}

如果把to换成through

#loading span:nth-child(1) {
    width: 0px;
}

#loading span:nth-child(2) {
    width: 20px;
}

#loading span:nth-child(3) {
    width: 40px;
}

@each

@each指令的格式是@each $var in $list , $var可以是任何变量名，比如$length 或者$name，而$list是一连串的值，也就是值列表。

$color-list:red green blue turquoise darkmagenta;
@each $color in $color-list {
    $index: index($color-list, $color);
    .p#{$index - 1} {
        background-color: $color;
    }
}

编译为

.p0 {
    background-color: red;
}

.p1 {
    background-color: green;
}

.p2 {
    background-color: blue;
}

.p3 {
    background-color: turquoise;
}

.p4 {
    background-color: darkmagenta;
}

@while

@while 指令循环输出直到表达式返回结果为 false。这样可以实现比@for 更复杂的循环。

比如，可以借此生成栅格化布局。

$column:12;
@while $column>0 {
   .col-sm-#{$column} {
      width: $column / 12 * 100%;
   }
    $column:$column - 1;
}

编译为

.col-sm-12 {
    width: 100%;
}

.col-sm-11 {
    width: 91.6666666667%;
}

.col-sm-10 {
    width: 83.3333333333%;
}

.col-sm-9 {
    width: 75%;
}

.col-sm-8 {
    width: 66.6666666667%;
}

.col-sm-7 {
    width: 58.3333333333%;
}

.col-sm-6 {
    width: 50%;
}

.col-sm-5 {
    width: 41.6666666667%;
}

.col-sm-4 {
    width: 33.3333333333%;
}

.col-sm-3 {
    width: 25%;
}

.col-sm-2 {
    width: 16.6666666667%;
}

.col-sm-1 {
    width: 8.3333333333%;
}

@import

@import算是一个比较简易的模块系统。scss拓展了@import 的功能，允许其导入 scss或 sass文件。被导入的文件将合并编译到同一个 css文件中，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

使用

common.scss

$color:red;

index.scss

@import "common.scss";
.container {
    border-color: $color;
}

编译成

.container {
  border-color: red;
}

以下情况下，@import 仅作为普通的css语句，不会导入scss文件：

  1. 文件拓展名是 .css ；
  2. 文件名以 http:// 开头；
  3. 文件名是 url() ；
  4. @import包含媒体查询。
@import "common.css";
@import url(common);
@import "http://xxx.com/xxx";
@import 'landscape' screen and (orientation:landscape);

scss允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件，不用再单独写个import引入。

@import "rounded-corners", "text-shadow";

导入文件也可以使用 #{} 插值语句（下面有讲，这里把它理解成js中模板字符串就行）动态导入，但不是通过变量动态导入 scss文件，只能作用于 css的 url() 导入方式

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

编译为

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

@Partials

如果需要导入 scss或者 sass文件，但又不希望将其编译为 css，只需要在文件名前添加下划线，这样会告诉 scss不要编译这些文件。
注意：

  1. 导入语句中却不需要添加下划线；
  2. 不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

_common.scss

$color:red;

index.scss

@import "common.scss";
.container {
    border-color: $color;
}

编译为

.container {
  border-color: red;
}

_common.scss文件不会编译成 _common.css 文件。

爆肝三天，学习Scss-看这篇就够了_第4张图片

Partials主要是用来定义公共样式的，专门用于被其他的 scss文件 import进行使用的。

嵌套@import

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用@import，其实，也可以将@import 嵌套进内层选择器或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中，存在作用域。

common.scss

.example {
    color: red;
}

index.scss

#main {
    @import "example";
}

被编译成

#main .example {
    color: red;
}

注意：@import不能嵌套使用在控制指令或混入中（带有@符号的叫指令）。

@media 媒体查询增强

scss中，@media 指令与 css中用法一样，只是增加了一点额外的功能，允许在css规则中嵌套。如果@media 嵌套在 css规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个让 @media 方便不少，不需要重复写选择器，也不会打乱 css的书写流程。

使用

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
    .item {
      height: auto;
    }
  }
}

编译为

.sidebar {
    width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
  .sidebar .item {
    height: auto;
  }
}

嵌套

@media允许互相嵌套使用，编译时，scss自动添加 and

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

编译为

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

使用插值

可以使用变量，函数，以及运算符代替条件的名称或者值。

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

编译为

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px;
  }
}

@mixin

混合指令（Mixin）用于定义可重复使用的样式。混合指令可以包含所有的css规则，绝大部分 scss规则，甚至可以通过参数功能引入变量，输出多样化的样式。

注意：函数命名和变量命名规则一致。

使用

@mixin mixin-name() {
    /* css 声明 */
}
// 使用
@include mixin-name;

标准形式

// 定义一个区块基本的样式
@mixin block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}
// 使用混入 
.container {
    .block {
        @include block;
    }
}

编译为

.container .block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}

嵌入选择器

@mixin里面再嵌套一层

@mixin warning-text {
    font-size: 12px;
    .warn-text {
        color: rgb(255, 253, 123);
        line-height: 180%;
    }
}

.container {
       @include warning-text;
}

编译为

.container {
    font-size: 12px;
}

.container .warn-text {
    color: #fffd7b;
    line-height: 180%;
}

单参数

// 定义flex布局元素纵轴的排列方式
@mixin flex-align($aitem) {
    align-items: $aitem;
}

// 只有一个参数，直接传递参数
.container {
    @include flex-align(center);
}

编译为

.container {
    align-items: center;
}

多参数

// 定义块元素内边距
@mixin block-padding($top, $right, $bottom, $left) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

// 按照参数顺序赋值
.container1 {
   @include block-padding(10px, 20px, 30px, 40px);
}

// 可指定参数赋值
.container2 {
   @include block-padding($left: 20px, $top: 10px, $bottom: 10px, $right: 30px);
}

// 可指定参数赋值，但是必须指定4个值，不能缺失
.container3 {
   @include block-padding($left: 10px, $top: 10px, $bottom: 0, $right: 0);
}

编译为

.container1 {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

.container2 {
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 20px;
}

.container3 {
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
}

指定默认值

// 定义块元素内边距，参数指定默认值
@mixin block-padding($top:0, $right:0, $bottom:0, $left:0) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

// 可指定参数赋值
.container {
    /** 不带参数 */
    @include block-padding;
    /** 按顺序指定参数值 */
    @include block-padding(10px,20px);
    /** 给指定参数指定值 */
    @include block-padding($left: 10px, $top: 20px)
}

编译为

.container {
    /** 不带参数 */
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    /** 按顺序指定参数值 */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 0;
    padding-left: 0;
    /** 给指定参数指定值 */
    padding-top: 20px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
}

可变参数

使用...处理参数不固定的情况，类似于js中的函数的剩余参数

@mixin linear-gradient($direction, $gradients...) {
    background-color: nth($gradients, 1);
    background-image: linear-gradient($direction, $gradients);
}

.table-data {
    @include linear-gradient(to right, #F00, orange, yellow);
}

编译为

.table-data {
    background-color: #F00;
    background-image: linear-gradient(to right, #F00, orange, yellow);
}

总结

  1. mixin是可以重复使用的一组css声明，有助于减少重复代码，只需声明一次，就可在文件中引用；
  2. 混合指令可以包含所有的 css规则，绝大部分scss规则，可以传递参数，输出多样化的样式；
  3. 使用参数时建议加上默认值；
  4. @import导入局部模块化样式（类似功能、同一组件）；
  5. @minix定义的是可重复使用的样式

@function

@function用于封装复杂的操作，可以很容易地以一种可读的方式抽象出通用公式和行为，函数提供返回值，常用来做计算方面的工作。

使用

注意：函数命名和变量命名规则一致。

@function square($base) {
    @return $base * $base * 1px;
}

.sidebar {
    float: left;
    margin-left: square(4);
}

编译为

.sidebar {
    float: left;
    margin-left: 16px;
}

可选参数

默认值可以是任何表达式，它们甚至可以引用前面的参数！

//change-color和hue是内置方法
//hue 返回$color的颜色为0到360度之间的一个数字。
//change-color 用于设置颜色的属性
@function invert($color, $amount: 100%) {
    //@error hue($color); 调试 210deg
    $inverse: change-color($color, $hue: hue($color) + 180);
    @return mix($inverse, $color, $amount);
}

$primary-color: #036;
.header {
    background-color: invert($primary-color, 80%);
}

编译为

.header {
    background-color: #523314;
}

指定参数

$primary-color: #036;
.banner {
    //scale-color Fluidly scales one or more properties of .$color
    background-color: $primary-color;
    color: scale-color($primary-color, $lightness: +40%);
}

编译为

.banner {
    background-color: #036;
    color: #0a85ff;
}

可变参数

参数列表还可用于采用任意关键字参数，meta.keywords()函数采用参数列表

@function sum($numbers...) {
    $sum: 0;
    @each $number in $numbers {
        $sum: $sum + $number;
    }
    @return $sum;
}

$widths: 50px, 30px, 100px;
.micro {
    width: sum($widths...);
}

编译为

.micro {
    width: 180px;
}

@return

@return只允许在@function内使用，和js一样，遇到return就会返回。

@function red() {
    $is: true;
    @if $is {
        @return 'is';
    }
    @return red;
}
.con{
    color: red();
}

编译为

.con {
    color: "is";
}

总结：
@function和@mixin参数的使用方式没啥区别；
@function用来计算，@mixin用来封装样式，@import用来抽离他们为一个模块。

@extend继承

使用

我们以elementUI的el-button组件为例，可以使用@extend继承已经存在的样式，原理是使用逗号选择器。

// # id选择器一样的
.button {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}

.btn-default {
    @extend .button;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-danger {
    @extend .button;
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

编译成

.button, .btn-danger, .btn-default {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

可以使用多个@extend

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.important {
    font-weight: bold;
    font-size: 14px;
}
.alert-danger {
    @extend .alert;
    @extend .important;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

编译为

.alert, .alert-danger {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.important, .alert-danger {
    font-weight: bold;
    font-size: 14px;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

多层继承

@extend可以多层继承，列如：.alert-danger继承自.important，.important又继承自.alert。

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.important {
    @extend .alert;
    font-weight: bold;
    font-size: 14px;
}
.alert-danger {
    @extend .important;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

编译为

.alert, .important, .alert-danger {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.important, .alert-danger {
    font-weight: bold;
    font-size: 14px;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

占位符选择器

占位符选择器%，与常用的id 与 class选择器写法相似，只是 # 或 . 替换成了%，占位符选择器必须通过 @extend 指令调用。\
还是上面的例子，这里使用占位符选择器操作

.button %base {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}
        
.btn-default {
    @extend %base;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-danger {
    @extend %base;
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

效果和上面的类选择器一样，但是，他有个有优点，占位符选择器%所属的样式未使用时，不会被编译到css文件中，算是一个小优化吧。

.button .btn-danger, .button .btn-default {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

@use

存在兼容性问题，仅在Dart Sass 1.23.0以上有效，官方文档有兼容性介绍。

scss真正意义上的模块化，可以从其它 scss样式表中加载mixin、function和变量，并将来自多个样式表的 css组合在一起。scss还提供了很多内置模块，我们可以通过@use使用。

@import缺点

  1. 多处导入，存在样式重复加载。
  2. 因为没有命名空间，为了避免撞名，不敢使用简写的 classname，因此起名总是需要注意。
  3. 没有私有函数的概念，样式完全暴露在使用import的地方，这对ui库不够友好。

使用

src/_corners.scss

$radius: 3px;
@mixin rounded {
    border-radius: $radius;
}

index.scss

@use "src/corners";
.button {
    @include corners.rounded;
    padding: 5px + corners.$radius;
}

命名空间

src/_corners.scss

$radius: 3px;
@mixin rounded {
    border-radius: $radius;
}

index.scss

@use "src/corners" as c;
.button {
    @include c.rounded;
    padding: 5px + c.$radius;
}

编译为

.button {
    border-radius: 3px;
    padding: 8px;
}

as*

使用as*，那么这一模块就处于全局命名空间。

src/_corners.scss

$radius: 3px;
@mixin rounded {
    border-radius: $radius;
}

index.scss

@use "src/corners" as *;

.button {
    @include rounded;
    padding: 5px + $radius;
}

编译为

.button {
    border-radius: 3px;
    padding: 8px;
}

私有模块

使用scss可以轻松地定义私有成员，私有成员命名以-或开头。

src/_corners.scss

$-radius: 3px;

@mixin rounded {
    border-radius: $-radius;
}

index.scss

@use "src/corners";

.button {
    @include corners.rounded;
    // Error: Private members can't be accessed from outside their modules
    padding: 5px + corners.$-radius;
}

@forward

@forward语句可以引入另一个模块的所有变量、mixins和函数，将它们直接作为当前模块的API暴露出去，不会真的在当前模块增加代码。不同于 @use， @forward不能给变量添加命名空间。

用法

注意，此时生成的bootstrap.css文件中，是不包含functions、variables、mixins代码的，也不能直接在bootstrap.scss文件中使用这些模块。而是需要在另一个文件中 @import 'bootstrap'或者 @use bootstrap模块，再去使用这些方法。bootstrap.scss文件类似于一个传输中转站，把上下游的成员变量无缝连接起来。

/* bootstrap.scss */
@forward"functions";
@forward"variables";
@forward"mixins";

注意，直接写在上游模块的正常的样式仍然会被 @forward 进来。见下例：

a.scss

@mixin rounded {
    border-radius: 100px;
}
footer {
    height: 1px;
}

b.scss

$radius: 3px;

c.scss

@forward "a";
@forward "b";

index.scss

@import "c.scss";

.button {
    @include rounded;
    padding: $radius;
}

编译为

footer {
    height: 1px;
}

.button {
    border-radius: 100px;
    padding: 3px;
}

show/ hide

通过控制 show和 hide，可以决定模块中的哪些成员对引入后的模板可见。对隐藏的变量，在下游文件中不可以使用，相当于模块私有成员。

c.scss

@forward "a" show rounded;
@forward "b" hide $radius;

index.css

@import "c.scss";

.button {
    @include rounded;
    padding: $radius;
}
// Error: Undefined variable. padding: $radius;

使用as *号为子模块添加前缀

大多数情况下，一个样式库会存在一个入口文件index.scss，然后在index.scss中引入其他的子文件。这种结构类似于一个多合一模块。那么，如果要在某一文件中 @forward多个子模块，就可以使用as -*语句，为子模块下的成员自动带上前缀以区分。

c.scss

@forward "a" as mixin-*;
@forward "b" as var-*;

index.css

@import "c.scss";

.button {
    @include mixin-rounded;
    padding: $var-radius;
}

很多内置的方法就是这样使用的，嘿嘿！

@at-root

@at-root用来跳出嵌套，在多级嵌套时比较常用，包含without和with。

用法

//没有跳出
.parent-1 {
    color:#f00;
    .child {
        width:100px;
    }
}

//单个选择器跳出
.parent-2 {
    color:#f00;
    @at-root .child {
        width:200px;
    }
}

//多个选择器跳出
.parent-3 {
    background:#f00;
    @at-root {
        .child1 {
            width:300px;
        }
        .child2 {
            width:400px;
        }
    }
}

编译为

.parent-1 {
    color: #f00;
}
.parent-1 .child {
    width: 100px;
}

.parent-2 {
    color: #f00;
}
.child {
    width: 200px;
}

.parent-3 {
    background: #f00;
}
.child1 {
    width: 300px;
}

.child2 {
    width: 400px;
}

@without和with

默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)或@at-root (without: support)，@at-root的关键词有四个：

  1. all 表示所有；
  2. rule 表示常规css选择器；
  3. media 表示media；
  4. support表示support（@support主要是用于检测浏览器是否支持css的某个属性）。

我们默认的@at-root是@at-root (without:rule)

/*跳出父级元素嵌套*/
@media print {
    .parent1{
        color:#f00;
        @at-root .child1 {
            width:200px;
        }
    }
}

/*跳出media嵌套，父级有效*/
@media print {
    .parent2{
        color:#f00;
        @at-root (without: media) {
            .child2 {
                width:200px;
            }
        }
    }
}

/*跳出media和父级*/
@media print {
    .parent3{
        color:#f00;
        @at-root (without: all) {
            .child3 {
                width:200px;
            }
        }
    }
}

编译成

/*跳出父级元素嵌套*/
@media print {
    .parent1 {
        color: #f00;
    }
    .child1 {
        width: 200px;
    }
}
/*跳出media嵌套，父级有效*/
@media print {
    .parent2 {
        color: #f00;
    }
}
.parent2 .child2 {
    width: 200px;
}
/*跳出media和父级*/
@media print {
    .parent3 {
        color: #f00;
    }
}
.child3 {
    width: 200px;
}

@at-root与 & 配合使用

.child{
    @at-root .parent &{
        color:#f00;
    }
}

编译成

.parent .child {
    color: #f00;
}

应用于@keyframe

.demo {
    animation: motion 3s infinite;
    @at-root {
        @keyframes motion {
        }
    }
}

编译成

.demo {
    animation: motion 3s infinite;
}
@keyframes motion {}

Scss内置扩展

scss内置扩展分为color list map math meta selector string等，扩展也就是scss内置的一些function，每个模块下内容比较多，这里用一些常用的进行举例。

内置函数可以使用@use模块化引入，也可以直接使用他提供的全局函数名调用，以下两种方式是一样的。

@use 'sass:list';
p {
    color: nth($list: red blue green, $n: 2); // blue
    color: list.nth($list: red blue green, $n: 2); // blue
}

color

scss包含很多操作颜色的函数。例如lighten()与 darken()可用于调亮或调暗颜色，opacify()使颜色透明度减少，transparent()使颜色透明度增加，mix()用来混合两种颜色。

.p1 {
    // 让颜色变亮
    color:scale-color(#5c7a29, $lightness: +30%);
}

.p2 {
    // 让颜色变暗
    color:scale-color(#5c7a29, $lightness: -15%);
}

.p3 {
    // 降低颜色透明度
    color:scale-color(#5c7a29, $alpha: -40%);
}

编译为

.p1 {
    color: #95c249;
}

.p2 {
    color: #4e6823;
}

.p3 {
    color: rgba(92, 122, 41, 0.6);
}

String

scss有许多处理字符串的函数，比如向字符串添加引号的quote()、获取字符串长度的string-length()和将内容插入字符串给定位置的string-insert()。

p {
    &:after {
        content: quote(这是里面的内容);
    }
    background-color: unquote($string: "#F00");
    z-index:str-length("scss学习");
}

编译为

p {
    background-color: #F00;
    z-index: 6;
}
p:after {
    content: "这是里面的内容";
}

Math

数值函数处理数值计算，例如：percentage()将无单元的数值转换为百分比，round()将数字四舍五入为最接近的整数，min()和max()获取几个数字中的最小值或最大值，random()返回一个随机数。

p {
    z-index: abs(-15); // 15
    z-index: ceil(5.8); //6
    z-index: max(5, 1, 6, 8, 3); //8
    opacity: random(); // 随机 0-1
}

编译为

p {
    z-index: 15;
    z-index: 6;
    z-index: max(5, 1, 6, 8, 3);
    opacity: 0.8636254167;
}

List

List函数操作List，length()返回列表长度，nth()返回列表中的特定项，join()将两个列表连接在一起，append()在列表末尾添加一个值。

p {
    z-index: length(12px); //1
    z-index: length(12px 5px 8px); //3
    z-index: index(a b c d, c); //3
    padding: append(10px 20px, 30px); // 10px 20px 30px
    color: nth($list: red blue green, $n: 2); // blue
}

编译为

p {
    z-index: 1;
    z-index: 3;
    z-index: 3;
    padding: 10px 20px 30px;
    color: blue;
}

Map

Map函数操作Map，map-get()根据键值获取map中的对应值，map-merge()来将两个map合并成一个新的map，map-values()映射中的所有值。

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px);
$padding:(top:10px, right:20px, bottom:10px, left:30px);
p {
    font-size: map-get($font-sizes, "normal"); //18px
    @if map-has-key($padding, "right") {
        padding-right: map-get($padding, "right");
    }
    &:after {
        content: map-keys($font-sizes) + " "+ map-values($padding) + "";
    }
}

编译为

p {
    font-size: 18px;
    padding-right: 20px;
}
p:after {
    content: '"small", "normal", "large" 10px, 20px, 10px, 30px';
}

selector

选择符相关函数可对选择css进行一些相应的操作，例如：selector-append()可以把一个选择符附加到另一个选择符，selector-unify()将两组选择器合成一个复合选择器。

@use 'sass:selector';

@debug selector.is-superselector("a", "a"); // true

// 可以直接使用@forward下的前缀
@debug selector-append("a", ".disabled"); // a.disabled
@debug selector-extend("a.disabled", "a", ".link"); // a.disabled, .link.disabled

.header {
    content: selector-append(".a", ".b", ".c") + '';
    content: selector-unify("a", ".disabled") + '';
}

编译为

.header {
    content: ".a.b.c";
    content: "a.disabled";
}

meta

meta提供一个mixin和一些原子级别的function，比如使用meta.calc-args获取方法的参数，meta.calc-name获取方法名。

meta.load-css

meta.load-css($url，$with:())该mixin可以把$url中css样式全部包含进来。注意，$url引入的函数，变量和mixin在 meta.load-css()后的scss中并不能用，它只会返回编译后的css代码。它的第二个参数可以修改使用了!default的变量。

src/corners

$border-contrast: false !default;

code {
    background-color: #6b717f;
    color: #d2e1dd;
    @if $border-contrast {
        border-color: #dadbdf;
    }
}

index.scss

@use "sass:meta";

body.dark {
    @include meta.load-css("src/corners", $with: ("border-contrast": true));
}

编译为

body.dark code {
    background-color: #6b717f;
    color: #d2e1dd;
    border-color: #dadbdf;
}

function

@use "sass:meta";

@debug meta.calc-args(calc(100px + 10%)); // unquote("100px + 10%")
@debug meta.calc-args(clamp(50px, var(--width), 1000px)); // 50px, unquote("var(--width)"), 1000px

@debug meta.calc-name(calc(100px + 10%)); // "calc"
@debug meta.calc-name(clamp(50px, var(--width), 1000px)); // "clamp"

调试相关

@debug

@debug打印表达式的值，方便调试。

$font-sizes: 10px + 20px;
    $style: (
        color: #bdc3c7
    );
.container {
    @debug $style;
    @debug $font-sizes;
}

爆肝三天，学习Scss-看这篇就够了_第5张图片

@error

@error显示致命错误

$colors: (
    blue: #c0392b,
    black: #2980b9
);

@function style-variation($style) {
    @error "Invalid color: '#{$style}'.";
    @if map-has-key($colors, $style) {
        @return map-get($colors, $style);
    }
}

.container {
    color: style-variation(white);
}

爆肝三天，学习Scss-看这篇就够了_第6张图片

@warn

@warn显示警告性建议，会显示堆栈信息。

$colors: (
    blue: #c0392b,
    black: #2980b9
  );

@function style-variation($style) {
    @warn "Invalid color: '#{$style}'.";
    @if map-has-key($colors, $style) {
        @return map-get($colors, $style);
    }
}

.container {
    color: style-variation(white);
}

爆肝三天，学习Scss-看这篇就够了_第7张图片

自检函数

自检相关函数，属于内置扩展meta下的方法，feature-exists()检查当前scss版本是否存在某个特性，variable-exists()检查当前作用域中是否存在某个变量，mixin-exists()检查某个mixin是否存在。自检函数通常用在代码的调试上，返回的是个布尔值。

$color:#F00;
@mixin padding($left:0, $top:0, $right:0, $bottom:0) {
    padding: $top $right $bottom $left;
}

.container {
    @if variable-exists(color) {
        color: $color;
    }
    @else {
        content: "$color不存在";
    }
    @if mixin-exists(padding) {
        @include padding($left: 10px, $right: 10px);
    }
}

编译为

.container {
    color: #F00;
    padding: 0 10px 0 10px;
}

结语

看了这么久了，辛苦了，不过我也写了很久啦，大佬不妨点个赞再走吧。
也可以看看我的其他文章，嘿嘿嘿

2022年元旦，我终于搞懂了原型和原型
13道隐式类型转换面试题，让你一次爽到底
⌈2022⌋ JavaScript超详细循环总结
云闪付小程序前端不完全踩坑指北
巧用Node.js process隐藏项目重要参数

你可能感兴趣的:(爆肝三天，学习Scss-看这篇就够了)

  • 情绪觉察日记第37天 露露_e800
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
  • 芦花鞋一四 许叶晗
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 想家 爆米花机
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • 小丽成长记（四十三） 玲玲54321
    小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • 向内而求 陈陈_19b4
    10月27日，阴。阅读书目:《次第花开》。作者:希阿荣博堪布，是当今藏传佛家宁玛派最伟大的上师法王，如意宝晋美彭措仁波切颇具影响力的弟子之一。多年以来，赴海内外各地弘扬佛法，以正式授课、现场开示、发表文章等多种方法指导佛学弟子修行佛法。代表作《寂静之道》、《生命这出戏》、《透过佛法看世界》自出版以来一直是佛教类书籍中的畅销书。图片发自App金句:1.佛陀说，一切痛苦的根源在于我们长期以来对自身及外
  • ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值） 研学随笔 arcgis经验分享
    我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
  • 那个抄袭的大张伟 猫小努
    最近一直在追《即刻电音》这个综艺，除了觉得出场节目的音乐制作人有意思之外，也觉得有两个导师挺有趣的（另外一个就忽略了吧）。孙艺兴在上一篇文章里面已经说过了，那么这篇就说说我们的大老师，大张伟吧。其实在节目刚开始大张伟出来的时候，我以为他是属于导师里面来活跃气氛负责搞笑的，毕竟孙艺兴属于卖萌卖傻卖老实的，尚雯婕一般负责装逼耍狠的，而大张伟一贯以来上综艺的形象基本上都是蹦蹦跳跳带动气氛的。谁知道，两期
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • 回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录leetcode算法职场和发展
    重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
  • 活给自己看，笑容才灿烂 听着了么
    白岩松说“有时候，我们活得很累，并非生活过于刻薄，而是我们太容易被外界的氛围所感染，被他人的情绪所左右。”心情是自己的。若只是活在别人的眼里、嘴里，便掌握不了让自己开心的主动权。人活着，不是为了活给别人看的，唯有做最真实的自己，活给自己看，笑容才灿烂。诚然，世事纷繁复杂，人人都有一张嘴，管也管不了。永远有人欣赏你，也永远有人批评你，不可能做到让所有人都满意，开心做自己才是最重要的。人生苦短，有太多
  • Python数据分析与可视化实战指南 William数据分析 pythonpython数据
    在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
  • git常用命令笔记 咩酱-小羊 git笔记
    ###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"[email protected]"基本操作克隆远程仓库gitclone查看
  • 2019-12-22-22:30 涓涓1016
    今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
  • 相信相信的力量 孙丽_cdb3
    孙丽中级十期坚持分享第345天有一个特别有哲理的故事：有一只老鹰下了蛋，这个蛋，不知怎的就滚到了鸡窝里去了，鸡也下了一窝蛋，然后鸡妈妈把这些蛋全都浮出来了，孵出来之后等小鸡长大一点了，就觉得鹰蛋孵出来的那只小鹰怪模怪样，这些小鸡都嘲笑它，真难看，真笨，丑死了，那只小鹰觉得自己真是谁也不像，真是不好看，后来鸡妈妈也不喜欢他，我怎么生出你这样的孩子来了？真烦人，后来这群小鸡和小鹰一起生活，有一天，老鹰
  • 谁家酒器最绝唱，藏在酒厂人未知？景阳冈酒厂先秦藏品大揭秘 李虓酒评论
    文/王赛时中国的酒器酒具历史久远，举世闻名。从北京的故宫博物院、中国国家博物馆，到世界各国的大型博物馆，都以能够收藏中国古代酒具而夸耀。但很少有人知道，在山东阳谷景阳冈酒厂，默默地收藏了两千件中国酒器。这些酒器，就封藏在景阳冈的酒道馆里。其中有一些青铜酒器，一睡就是三、四千年，堪称无声国宝，堪作无字史书！今天，我将引领诸位首先窥视一下景阳冈酒道馆的9件先秦藏品，你自己来说震撼不震撼。提示：这只是景
  • 将cmd中命令输出保存为txt文本文件 落难Coder Windowscmdwindow
    最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
  • 我的黑历史 袖手围观有来有去
    孩子同学与我们一起共进晚餐，俩孩子加我三个人。小同学是一个大方率性礼貌的小孩，我们也都非常喜欢。好了，回到正题上来让我把这个故事讲完。俩孩子都喜欢吃鱼，所以就发生了小孩子之间常会发生的事。我狠狠的盯了我家孩子，孩子表情有些狼狈。和孩子单独一起的时候，见她尚未释怀，并谴责我不该狠盯她，让她没面子。也许是她触动了我的童年往事吧。由此，一狠心，给她讲了一段埋藏心里极深的黑历史：我奶奶有四个儿子，四个儿子
  • 18-115 一切思考不能有效转化为行动，都TM是扯淡！ 成长时间线
    7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的
  • 【夜读】提升生活品质的8个建议 茳淮秀水
    停止攀比很多人之所以感觉疲惫，部分原因是来自于跟别人攀比。殊不知，攀比得到的满足只是片刻的，过后往往会感到空虚。过分在意别人的评价，丢失的是自己原有的审美，扰乱的是自己最初的节奏。不妨活得洒脱些，自己内心丰盈了，快乐就能更持久。停止自责想改变自己，先从接纳自己开始。越是过分自责，就越难改变现状，因为如果把精力全耗在自责上，就没有精力用来改变了。遇到问题，我们要用正确的心态去面对。与其一味自责，不如
  • 蘩漪：新女性？利己主义者 赮_红雨
    蘩漪是曹禺《雷雨》笔下的女性形象。对于她的喜爱，曹禺在之前的访谈中，就已经表达得很清楚了，蘩漪是他所倾心的女子的“代替者”。在这个女性身上有着曹禺最精心的描写，但同时她的身上又存在着一些时代的问题。图片发自App首先，繁漪是追求自由和幸福的新女性形象。她是精神悲剧的核心人物，她对周朴园的反抗，具有典型意义。她是位资产阶级家庭出身的小姐，受过五四新思潮的影响，她任性、傲慢，追求人格独立、个性自由和爱
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • 如果做到轻松在股市赚钱？只要坚持这三个原则。 履霜之人
    大A股里向来就有七亏二平一赚的说法，能赚钱的都是少数人。否则股市就成了慈善机构，人人都有钱赚，谁还要上班？所以说亏钱是正常的，或者说是应该的。那么那些赚钱的人又是如何做到的呢？普通人能不能找到捷径去分一杯羹呢？方法是有的，但要做到需要你有极高的自律。第一，控制仓位，散户最大的问题是追涨杀跌，只要涨起来，就把钱往股票上砸，然后被套，隔天跌的受不了，又一刀切，全部割肉。来来回回间，遍体鳞伤。所以散户首
  • 《人世间》 南询yi
    今日分享十点推文，《人世间》有感苏格拉底说：“天地只有三尺，而人在五尺开外，所以人人都要懂得低头。”深以为然。懂得低头，不是认输。而是于人世间找寻温存的成熟，于困境中寻觅柳暗花明的智慧，于争执中展示屈伸自如的格局。正如仰头不是骄傲，是要看见自己的天空；低头也不是认输，而是要看清自己的路。成大事者，不仅要抬头挺胸，还得低头看路。懂得低头，进退有度，不是认输，而是竭尽全力过好这一生。宫崎骏说过：“所有
  • 高端密码学院笔记285 柚子_b4b4
    高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
  • 勇士赢了，我把掌声给了骑士 复角度的生活
    今天，不参加高考，只看NBA总决赛第三场的较量。这么说有点得罪高考生了，不过我没有当他们面秀，也没有跑到考点外面得瑟，所以我内心毫无波澜。毫无疑问，考场里不乏骑士和勇士球迷，在紧张作答语文考卷同时还心系着球队，不过我希望今天的比赛不会让你们有所分心，毕竟高考不会像比赛录像那样可以再来。今天，好像起来赶考一样，我起得很早，然而事实是睡不着，挺郁闷的，又不是我高考，我紧张什么？九点我并没有准时打开浏览
  • Hadoop(一) 朱辉辉33 hadooplinux
    今天在诺基亚第一天开始培训大数据，因为之前没接触过Linux，所以这次一起学了，任务量还是蛮大的。 首先下载安装了Xshell软件，然后公司给了账号密码连接上了河南郑州那边的服务器，接下来开始按照给的资料学习，全英文的，头也不讲解，说锻炼我们的学习能力，然后就开始跌跌撞撞的自学。这里写部分已经运行成功的代码吧.    在hdfs下，运行hadoop fs -mkdir /u
  • maven An error occurred while filtering resources blackproof maven报错
    转：http://stackoverflow.com/questions/18145774/eclipse-an-error-occurred-while-filtering-resources   maven报错： maven An error occurred while filtering resources   Maven -> Update Proje
  • jdk常用故障排查命令 daysinsun jvm
    linux下常见定位命令： 1、jps      输出Java进程       -q       只输出进程ID的名称，省略主类的名称；       -m      输出进程启动时传递给main函数的参数；     &nb
  • java 位移运算与乘法运算 周凡杨 java位移运算乘法
      对于 JAVA 编程中，适当的采用位移运算，会减少代码的运行时间，提高项目的运行效率。这个可以从一道面试题说起：     问题： 用最有效率的方法算出2 乘以8 等於几?” 答案：2 << 3 由此就引发了我的思考，为什么位移运算会比乘法运算更快呢？其实简单的想想，计算机的内存是用由 0 和 1 组成的二
  • java中的枚举(enmu) g21121 java
    从jdk1.5开始，java增加了enum(枚举)这个类型，但是大家在平时运用中还是比较少用到枚举的，而且很多人和我一样对枚举一知半解，下面就跟大家一起学习下enmu枚举。先看一个最简单的枚举类型，一个返回类型的枚举： public enum ResultType { /** * 成功 */ SUCCESS, /** * 失败 */ FAIL,
  • MQ初级学习 510888780 activemq
    1.下载ActiveMQ 去官方网站下载：http://activemq.apache.org/ 2.运行ActiveMQ 解压缩apache-activemq-5.9.0-bin.zip到C盘，然后双击apache-activemq-5.9.0-\bin\activemq-admin.bat运行ActiveMQ程序。 启动ActiveMQ以后，登陆：http://localhos
  • Spring_Transactional_Propagation 布衣凌宇 springtransactional
    //事务传播属性 @Transactional(propagation=Propagation.REQUIRED)//如果有事务，那么加入事务，没有的话新创建一个 @Transactional(propagation=Propagation.NOT_SUPPORTED)//这个方法不开启事务 @Transactional(propagation=Propagation.REQUIREDS_N
  • 我的spring学习笔记12-idref与ref的区别 aijuans spring
    idref用来将容器内其他bean的id传给<constructor-arg>/<property>元素，同时提供错误验证功能。例如： <bean id ="theTargetBean" class="..." /> <bean id ="theClientBean" class=&quo
  • Jqplot之折线图 antlove jsjqueryWebtimeseriesjqplot
    timeseriesChart.html <script type="text/javascript" src="jslib/jquery.min.js"></script> <script type="text/javascript" src="jslib/excanvas.min.js&
  • JDBC中事务处理应用 百合不是茶 javaJDBC编程事务控制语句
      解释事务的概念; 事务控制是sql语句中的核心之一;事务控制的作用就是保证数据的正常执行与异常之后可以恢复   事务常用命令:             Commit提交         
  • [转]ConcurrentHashMap Collections.synchronizedMap和Hashtable讨论 bijian1013 java多线程线程安全HashMap
    在Java类库中出现的第一个关联的集合类是Hashtable，它是JDK1.0的一部分。 Hashtable提供了一种易于使用的、线程安全的、关联的map功能，这当然也是方便的。然而，线程安全性是凭代价换来的――Hashtable的所有方法都是同步的。此时，无竞争的同步会导致可观的性能代价。Hashtable的后继者HashMap是作为JDK1.2中的集合框架的一部分出现的，它通过提供一个不同步的
  • ng-if与ng-show、ng-hide指令的区别和注意事项 bijian1013 JavaScriptAngularJS
            angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或
  • 【持久化框架MyBatis3七】MyBatis3定义typeHandler bit1129 TypeHandler
    什么是typeHandler? typeHandler用于将某个类型的数据映射到表的某一列上，以完成MyBatis列跟某个属性的映射   内置typeHandler MyBatis内置了很多typeHandler，这写typeHandler通过org.apache.ibatis.type.TypeHandlerRegistry进行注册，比如对于日期型数据的typeHandler，
  • 上传下载文件rz,sz命令 bitcarter linux命令rz
    刚开始使用rz上传和sz下载命令： 因为我们是通过secureCRT终端工具进行使用的所以会有上传下载这样的需求： 我遇到的问题： sz下载A文件10M左右，没有问题 但是将这个文件A再传到另一天服务器上时就出现传不上去，甚至出现乱码，死掉现象，具体问题 解决方法： 上传命令改为;rz -ybe 下载命令改为：sz -be filename 如果还是有问题： 那就是文
  • 通过ngx-lua来统计nginx上的虚拟主机性能数据 ronin47 ngx-lua　统计 解禁ip
    介绍 以前我们为nginx做统计,都是通过对日志的分析来完成.比较麻烦,现在基于ngx_lua插件,开发了实时统计站点状态的脚本,解放生产力.项目主页: https://github.com/skyeydemon/ngx-lua-stats 功能 支持分不同虚拟主机统计, 同一个虚拟主机下可以分不同的location统计. 可以统计与query-times request-time
  • java-68-把数组排成最小的数。一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的。例如输入数组{32, 321}，则输出32132 bylijinnan java
    import java.util.Arrays; import java.util.Comparator; public class MinNumFromIntArray { /** * Q68输入一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的一个。 * 例如输入数组{32, 321}，则输出这两个能排成的最小数字32132。请给出解决问题
  • Oracle基本操作 ccii Oracle SQL总结Oracle SQL语法Oracle基本操作Oracle SQL
    一、表操作 1. 常用数据类型 NUMBER(p,s)：可变长度的数字。p表示整数加小数的最大位数，s为最大小数位数。支持最大精度为38位 NVARCHAR2(size)：变长字符串，最大长度为4000字节（以字符数为单位） VARCHAR2(size)：变长字符串，最大长度为4000字节（以字节数为单位） CHAR(size)：定长字符串，最大长度为2000字节，最小为1字节，默认
  • [强人工智能]实现强人工智能的路线图 comsci 人工智能
        1：创建一个用于记录拓扑网络连接的矩阵数据表      2:自动构造或者人工复制一个包含10万个连接(1000*1000)的流程图      3：将这个流程图导入到矩阵数据表中      4：在矩阵的每个有意义的节点中嵌入一段简单的
  • 给Tomcat，Apache配置gzip压缩(HTTP压缩)功能 cwqcwqmax9 apache
    背景： HTTP 压缩可以大大提高浏览网站的速度，它的原理是，在客户端请求网页后，从服务器端将网页文件压缩，再下载到客户端，由客户端的浏览器负责解压缩并浏览。相对于普通的浏览过程HTML ,CSS,Javascript , Text ，它可以节省40%左右的流量。更为重要的是，它可以对动态生成的，包括CGI、PHP , JSP , ASP , Servlet,SHTML等输出的网页也能进行压缩，
  • SpringMVC and Struts2 dashuaifu struts2springMVC
    SpringMVC VS Struts2 1: spring3开发效率高于struts 2: spring3 mvc可以认为已经100%零配置 3: struts2是类级别的拦截， 一个类对应一个request上下文， springmvc是方法级别的拦截，一个方法对应一个request上下文，而方法同时又跟一个url对应 所以说从架构本身上 spring3 mvc就容易实现r
  • windows常用命令行命令 dcj3sjt126com windowscmdcommand
    在windows系统中，点击开始－运行，可以直接输入命令行，快速打开一些原本需要多次点击图标才能打开的界面，如常用的输入cmd打开dos命令行，输入taskmgr打开任务管理器。此处列出了网上搜集到的一些常用命令。winver 检查windows版本 wmimgmt.msc 打开windows管理体系结构(wmi) wupdmgr windows更新程序 wscrip
  • 再看知名应用背后的第三方开源项目 dcj3sjt126com ios
    知名应用程序的设计和技术一直都是开发者需要学习的，同样这些应用所使用的开源框架也是不可忽视的一部分。此前《 iOS第三方开源库的吐槽和备忘》中作者ibireme列举了国内多款知名应用所使用的开源框架，并对其中一些框架进行了分析，同样国外开发者 @iOSCowboy也在博客中给我们列出了国外多款知名应用使用的开源框架。另外txx's blog中详细介绍了 Facebook Paper使用的第三
  • Objective-c单例模式的正确写法 jsntghf 单例iosiPhone
    一般情况下，可能我们写的单例模式是这样的： #import <Foundation/Foundation.h> @interface Downloader : NSObject + (instancetype)sharedDownloader; @end #import "Downloader.h" @implementation
  • jquery easyui datagrid 加载成功，选中某一行 hae jqueryeasyuidatagrid数据加载
    1.首先你需要设置datagrid的onLoadSuccess $( '#dg' ).datagrid({onLoadSuccess :  function (data){      $( '#dg' ).datagrid( 'selectRow' ,3); }});   2.onL
  • jQuery用户数字打分评价效果 ini JavaScripthtmljqueryWebcss
    效果体验：http://hovertree.com/texiao/jquery/5.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery用户数字打分评分代码 - HoverTree</
  • mybatis的paramType kerryg DAOsql
    MyBatis传多个参数： 1、采用#{0},#{1}获得参数：    Dao层函数方法：     public User selectUser(String name,String area); 对应的Mapper.xml    <select id="selectUser" result
  • centos 7安装mysql5.5 MrLee23 centos
    首先centos7 已经不支持mysql，因为收费了你懂得，所以内部集成了mariadb，而安装mysql的话会和mariadb的文件冲突，所以需要先卸载掉mariadb，以下为卸载mariadb，安装mysql的步骤。   #列出所有被安装的rpm package rpm -qa | grep mariadb   #卸载 rpm -e mariadb-libs-5.
  • 利用thrift来实现消息群发 qifeifei thrift
               Thrift项目一般用来做内部项目接偶用的，还有能跨不同语言的功能，非常方便，一般前端系统和后台server线上都是3个节点，然后前端通过获取client来访问后台server，那么如果是多太server，就是有一个负载均衡的方法，然后最后访问其中一个节点。那么换个思路，能不能发送给所有节点的server呢，如果能就
  • 实现一个sizeof获取Java对象大小 teasp javaHotSpot内存对象大小sizeof
       由于Java的设计者不想让程序员管理和了解内存的使用，我们想要知道一个对象在内存中的大小变得比较困难了。本文提供了可以获取对象的大小的方法，但是由于各个虚拟机在内存使用上可能存在不同，因此该方法不能在各虚拟机上都适用，而是仅在hotspot 32位虚拟机上，或者其它内存管理方式与hotspot 32位虚拟机相同的虚拟机上 适用。     
  • SVN错误及处理 xiangqian0505 SVN提交文件时服务器强行关闭
    在SVN服务控制台打开资源库“SVN无法读取current” ---摘自网络 写道 SVN无法读取current修复方法 Can't read file : End of file found 文件：repository/db/txn_current、repository/db/current   其中current记录当前最新版本号，txn_current记录版本库中版本
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他