sass05 数据类型，数据运算

Posted 2020-09-22 672530440

/*! 数字类型 */
$n1: 1.2;
$n2: 12;
$n3: 14px;

p{
  font-size: $n3;
}

/*! 字符串类型*/
$s1: container;
$s2: ‘container‘;
$s3: "container";

.#{$s3}{
  font-size: $n3;
}

/*! Bool类型*/
$bt: ture;
$bf: false;

/*! Null类型*/
$null: null;

body{
  @if $null == null{
    color: red;
  }
}

/*! 颜色类型*/
$c1: blue;
$c2: #fff;
$c3: rgba(255,255,0,0.5);

body{
  color: $c3;
}

$width1: 10px;
$width2: 15px;

/*== ！=所有数据类型都支持，<,>,<=,>=仅仅支持数字类型，*/

span{
  width: $width1 - $width2; //空格隔开，不隔开会报错
}

a:hover{
  cursor: e + -resize; //e-resize是标准做法
}

a:before{
  content: "A" + bc;//"Abc"，第一个有单引号双引号结果就有单引号双引号
}
a:before{
  content: A + ‘bc‘;// Abc，第一个没有单引号双引号结果就没有单引号双引号
}

p{
  padding: 3px + 4px auto; 
}

$version: 3;
p:before{
  content: ‘Hello,Sass #{$version}‘;
}

p{
  font: 20px / 10px;    //运算符最好空格隔开
  width: $width2 / 2;     
  width: round($width2) / 2;
  height: (100px / 2);            //不写小括号不能运算
}

@charset "UTF-8";
/*! 数字类型 */
/* line 6, ../sass/demo1.scss */
p {
  font-size: 14px;
}

/*! 字符串类型*/
/* line 15, ../sass/demo1.scss */
.container {
  font-size: 14px;
}

/*! Bool类型*/
/*! Null类型*/
/* line 26, ../sass/demo1.scss */
body {
  color: red;
}

/*! 颜色类型*/
/* line 37, ../sass/demo1.scss */
body {
  color: rgba(255, 255, 0, 0.5);
}

/* line 44, ../sass/demo1.scss */
span {
  width: -5px;
}

/* line 48, ../sass/demo1.scss */
a:hover {
  cursor: e-resize;
}

/* line 52, ../sass/demo1.scss */
a:before {
  content: "Abc";
}

/* line 55, ../sass/demo1.scss */
a:before {
  content: Abc;
}

/* line 59, ../sass/demo1.scss */
p {
  padding: 7px auto;
}

/* line 63, ../sass/demo1.scss */
p:before {
  content: "Hello,Sass 3";
}

/* line 67, ../sass/demo1.scss */
p {
  font: 20px / 10px;
  width: 7.5px;
  width: 7.5px;
  height: 50px;
}