1.关系运算符 == != >= <= < >
/* 一般关系运算符结合@if @elses使用 */
.container{
@if ($theme == "y"){
background-color: red;
}
@else{
background-color: green;
}
@if ($num >= 15){
border: 1px solid red;
}
@else if ($num <= 5){
border: none;
}
@else{
border: 2px solid white;
}
}
生成css代码
.container {
background-color: green;
border: 2px solid white;
}
2.逻辑运算符 and or not
$width:200;
$height:100;
.footer{
@if( $width >100 and $height<20 ){ //不符合条件
width: 500px;
}
@else if not($width < 100 or $height > 100){//不符合条件
width: 100px;
}@else{
width: 200px;
}
}
生成css代码
.footer {
width: 100px;
}
3.算数运算符 +-*/ %
/* 数字类型包括: 纯数字、百分号、css部分单位(px pt in...) */
.container{
/* + 运算符 */
width: 20+30;
width: 20px+50; //纯数字 自动转换--->50px
width: 20%+60; //自动转换 --> %
width: 20px+15pt; //自动转换 px ---> pt
// width: 20% + 15px; %不能与px相互转换
/* - 运算符 */
width:50 - 10;
width:50 - 30px;
width:50% - 20;
width:50px - 3pt;
//width:50px-3%; 报错
/* *运算符 */
width: 50* 10;
width: 50 * 3px;
width: 50% * 5;
//乘法不能同时有两个单位
//width: 50px * 5px;
//width: 50% * 5%
/* /运算符 特定条件下才是除法 */
width: 50/5;
width: (50/5); //括号
width: round($number: 50)/5; //函数返回值
width: 100/50-2px; //有其他算术运算
width: $num/5; //有变量
/* %运算符 */
width: 10 % 3;
width: 10px % 3;
width: 10px % 3px;
width: 10% % 2;
width: 50% % 10%;
//width: 10% % 5px;
/* +连接字符串 */
content: "foo"+bar;
content: foo+"bar";
content: "foo"+"bar";
content: foo+bar;
}
生成css代码
.container {
/* + 运算符 */
width: 50;
width: 70px;
width: 80%;
width: 40px;
/* - 运算符 */
width: 40;
width: 20px;
width: 30%;
width: 46px;
/* *运算符 */
width: 500;
width: 150px;
width: 250%;
/* /运算符 特定条件下才是除法 */
width: 50/5;
width: 10;
width: 10;
width: 0px;
width: 2;
/* %运算符 */
width: 1;
width: 1px;
width: 1px;
width: 0%;
width: 0%;
/* +连接字符串 */
content: "foobar";
content: foobar;
content: "foobar";
content: foobar;
}
