斬獲 2021 紅點最佳設計獎，微軟釋出 Flowspace Pod 混合辦公空間：巨大 Surface 觸控式螢幕，彩色 LED 背光裝飾
阿新 • • 發佈：2021-12-06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/sass.min.css">
</head>
<body>
<button>按鈕</button>
<a href="#">超連結</a>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>
css樣式
html{margin:0}body button{color:pink;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;border:2px solid red}body
a{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%}body ul{display:flex;justify-content:space-between;
align-items:center;border:2px dotted red}body ul
li{list-style:none}body div,body span{border:1px solid red;background-color:red}
body span{font-size:20px;background-color:transparent}
scss
@import "./common.scss";//匯入的語法
body{
button{
color: $error;
@include border-rad;
@include border(2px,solid,red);
}
a{
@include border-rad;
}
ul{
@include h-ul;
// $s:dotted 虛線
@include border($w:2px,$s:dotted,$c:red);
}
// 繼承
div{
border: 1px solid red;
background-color: red;
}
// 繼承div的樣式
span{
@extend div;
font-size: 20px;
background-color: transparent;
}
}