{"id":2316,"date":"2023-11-13T11:37:39","date_gmt":"2023-11-13T03:37:39","guid":{"rendered":""},"modified":"2023-11-13T11:37:39","modified_gmt":"2023-11-13T03:37:39","slug":"Sass \u8fd0\u7b97\u7b26","status":"publish","type":"post","link":"https:\/\/bianchenghao6.com\/2316.html","title":{"rendered":"Sass \u8fd0\u7b97\u7b26"},"content":{"rendered":"
\n

Sass \u8fd0\u7b97\u7b26<\/h1>\n<\/div>\n

Sass\u8fd0\u7b97\u7b26<\/h2>\n
\n Sass\u53ef\u5e2e\u52a9\u60a8\u5728\u6837\u5f0f\u8868\u4e2d\u8fdb\u884c\u57fa\u672c\u7684\u6570\u5b66\u8fd0\u7b97\u3002\u5e94\u7528\u9002\u5f53\u7684\u7b97\u672f\u7b26\u53f7\u975e\u5e38\u7b80\u5355\u3002\n<\/div>\n
\n Sass\u63d0\u4f9b\u4e86\u4e00\u4e9b\u6807\u51c6\u7684\u6570\u5b66\u8fd0\u7b97\u7b26\uff0c\u5373+\uff0c-\uff0c*\uff0c\/\u548c\uff05\u3002\n<\/div>\n
\n \u8ba9\u6211\u4eec\u4ee5\u4e00\u4e2a\u4f8b\u5b50\u6765\u505a\u4e00\u4e9b\u7b80\u5355\u7684\u6570\u5b66\u8fd0\u7b97\u5373\u53ef\u8ba1\u7b97\u51fa\u9884\u7559\u548c\u6587\u7ae0\u7684\u5bbd\u5ea6\u3002\n<\/div>\n
\n SCSS\u8bed\u6cd5:\n<\/div>\n
\n
\r\n.container { width: 100%; }\r\narticle[role=\"main\"<\/span>] {\r\n  float<\/span>: left;\r\n  width: 600px \/ 960px * 100%;\r\n}\r\naside[role=\"complementary\"<\/span>] {\r\n  float<\/span>: right;\r\n  width: 300px \/ 960px * 100%;\r\n}<\/pre>\n
<\/code>\n<\/div>\n
\n  \u7b49\u6548\u7684Sass\u8bed\u6cd5:\n<\/div>\n
\n
\r\n.container\r\n  width: 100%\r\narticle[role=\"main\"<\/span>]\r\n  float<\/span>: left\r\n  width: 600px \/ 960px * 100%\r\naside[role=\"complementary\"<\/span>]\r\n  float<\/span>: right\r\n  width: 300px \/ 960px * 100%<\/pre>\n
<\/code>\n<\/div>\n
\n  \u8fd9\u5c06\u521b\u5efa\u4e00\u4e2a\u975e\u5e38\u7b80\u5355\u7684\u57fa\u4e8e960px\u7684\u6d41\u4f53\u7f51\u683c\u3002 Sass\u64cd\u4f5c\u5c06\u6267\u884c\u8bf8\u5982\u83b7\u53d6\u50cf\u7d20\u503c\u5e76\u5c06\u5176\u8f6c\u6362\u4e3a\u767e\u5206\u6bd4\u7684\u64cd\u4f5c\u800c\u6ca1\u6709\u592a\u591a\u9ebb\u70e6\u3002\n<\/div>\n
\n  \u5b83\u5c06\u751f\u6210\u5982\u4e0bCSS:\n<\/div>\n
\n
\r\n.container {\r\n  width: 100%;\r\n}\r\narticle[role=\"main\"<\/span>] {\r\n  float<\/span>: left;\r\n  width: 62.5%;\r\n}\r\naside[role=\"complementary\"<\/span>] {\r\n  float<\/span>: right;\r\n  width: 31.25%;\r\n}<\/pre>\n
<\/code>\n<\/div>\n
\n
 Sass\u64cd\u4f5c\u7b26\u5217\u8868<\/h2>\n
\n
 1)\u8d4b\u503c\u8fd0\u7b97\u7b26<\/h2>\n
\n  \u5728Sass\u4e2d\uff0c\u5192\u53f7(: )\u8fd0\u7b97\u7b26\u7528\u4e8e\u5b9a\u4e49\u53d8\u91cf\u3002\n<\/div>\n
\n  \u8bed\u6cd5:\n<\/div>\n
\n
\r\n$main-color: lightpink;<\/pre>\n
<\/code>\n<\/div>\n
\n
 2)\u7b97\u672f\u8fd0\u7b97\u7b26<\/h2>\n
\n  \u8fd9\u4e9b\u662f\u7528\u4e8e\u6267\u884c\u7b97\u672f\u8fd0\u7b97\u7684\u4e00\u4e9b\u6807\u51c6\u6570\u5b66\u8fd0\u7b97\u7b26\u3002 Sass\u652f\u6301\u4ee5\u4e0b\u7b97\u672f\u8fd0\u7b97\u7b26\u3002\n<\/div>\n
\n  \u7b97\u672f\u8fd0\u7b97\u7b26\u5217\u8868:\n<\/div>\n\n\n\n\n\n\n\n\n
 operator <\/td>\n\u8bf4\u660e<\/td>\n<\/tr>\n
 + <\/td>\n\u6b64\u8fd0\u7b97\u7b26\u7528\u4e8e\u52a0\u6cd5\u3002<\/td>\n<\/tr>\n
-<\/td>\n\u6b64\u8fd0\u7b97\u7b26\u7528\u4e8e\u51cf\u6cd5\u3002<\/td>\n<\/tr>\n
 * <\/td>\n\u6b64\u8fd0\u7b97\u7b26\u7528\u4e8e\u4e58\u6cd5\u3002<\/td>\n<\/tr>\n
\/<\/td>\n\u6b64\u8fd0\u7b97\u7b26\u7528\u4e8e\u9664\u6cd5\u3002<\/td>\n<\/tr>\n
\uff05<\/td>\n\u8be5\u8fd0\u7b97\u7b26\u7528\u4e8e\u4f59\u6570\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n  \u91cd\u8981\u4e8b\u5b9e:\n<\/div>\n
\u52a0\u6cd5(+)\u8fd0\u7b97\u7b26\u8fd8\u53ef\u7528\u4e8e\u8fde\u63a5\u5b57\u7b26\u4e32\uff0c\u4f46\u4ec5\u9002\u7528\u4e8e\u5177\u6709\u517c\u5bb9\u5355\u4f4d\u7684\u6570\u5b57\u3002<\/span> <\/p>\n
\n  \u4f8b\u5982:\n<\/div>\n
\n
\r\nh2 {\r\n    font-size: 15px + 2em; \/\/ Show error due to incompatible units\r\n    font-size: 15px + 2; \/\/ 17px\r\n}<\/pre>\n
<\/code>\n<\/div>\n
\u5c06\u4e24\u4e2a\u76f8\u540c\u5355\u4f4d\u7684\u6570\u5b57\u76f8\u4e58\u662f\u65e0\u6548\u7684CSS: <\/span> <\/p>\n
\n
\r\nh2 {\r\n    font-size: 5px * 2px; \/\/ invalid CSS\r\n} <\/pre>\n
<\/code>\n<\/div>\n
\u9664\u6cd5\u8fd0\u7b97\u7b26\u662fCSS\u901f\u8bb0\u5c5e\u6027\u7684\u7ec4\u6210\u90e8\u5206\u3002<\/span> <\/p>\n
\n  \u4f8b\u5982:\n<\/div>\n
\n
\r\nfont: 16px \/ 24px Arial sans-serif;\r\nbackground: url(\"http:\/\/example.com\"<\/span>) no-repeat fixed center \/ cover; <\/pre>\n
<\/code>\n<\/div>\n
\n  \u4f46\u662fSass\u66f4\u559c\u6b22\u4f7f\u7528\u6b63\u659c\u6760(\/)\u6765\u6267\u884c\u9664\u6cd5\u8fd0\u7b97\u3002\u8ba9\u6211\u4eec\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u770b\u770bSass\u5982\u4f55\u7406\u89e3\u8fd9\u4e2a\u7b26\u53f7\u3002\n<\/div>\n
\n
\r\nh2 {\r\n    font-size: 16px \/ 24px \/\/ Outputs as CSS\r\n    font-size: (16px \/ 24px) \/\/ Uses parentheses, does division\r\n    font-size: #{$base-size} \/ #{$line-height}; \/\/ Uses interpolation, outputs as CSS<\/span>\r\n    font-size: $base-size \/ $line-height \/\/ Uses variables, does division\r\n    opacity: random(4) \/ 5; \/\/ Uses a function, does division\r\n    padding-right: 2px \/ 4px + 3px \/\/ Uses an arithmetic expression, does division\r\n} <\/pre>\n
<\/code>\n<\/div>\n
 Sass\u6839\u636eBODMAS\u516c\u5f0f\u9075\u5faa\u8fd0\u7b97\u7b26\u4f18\u5148\u7ea7\u3002<\/span>
\n\u9996\u5148\u8bc4\u4f30\u62ec\u53f7\u5185\u7684\u8868\u8fbe\u5f0f\u3002<\/span>
\n\u76f8\u4e58(*)\u548c\u76f8\u9664(\/)\u8fd0\u7b97\u7b26\u7684\u4f18\u5148\u7ea7\u9ad8\u4e8e\u52a0\u6cd5(+)\u548c\u76f8\u51cf\u8fd0\u7b97\u7b26(-)\u3002<\/span> <\/p>\n
\n  \u8bf7\u53c2\u89c1\u4ee5\u4e0b\u793a\u4f8b:\n<\/div>\n
\n
\r\nh2 {\r\n     width: 3px * 5 + 5px; \/\/ 20px\r\n     width: 3 * (5px + 5px); \/\/ 30px\r\n     width: 3px + (6px \/ 2) * 3; \/\/ 12px\r\n }<\/pre>\n
<\/code>\n<\/div>\n
\n
 3)\u7b49\u5f0f\u8fd0\u7b97\u7b26<\/h2>\n
\n  \u7b49\u5f0f\u8fd0\u7b97\u7b26\u5728\u6761\u4ef6\u8bed\u53e5\u4e2d\u4f7f\u7528\u3002\u8fd9\u4e9b\u8fd0\u7b97\u7b26\u7528\u4e8e\u6d4b\u8bd5\u4e24\u4e2a\u503c\u662f\u5426\u76f8\u540c\u5e76\u8fd4\u56de\u5e03\u5c14\u503c\u3002\n<\/div>\n
\n  Sass\u652f\u6301\u4ee5\u4e0b\u76f8\u7b49\u8fd0\u7b97\u7b26\u3002\n<\/div>\n\n\n\n\n\n
\u64cd\u4f5c\u7b26<\/td>\n\u8bf4\u660e<\/td>\n<\/tr>\n
 == <\/td>\n\u5b83\u7b49\u4e8e\u8fd0\u7b97\u7b26\u3002<\/td>\n<\/tr>\n
!=<\/td>\n\u5b83\u4e0d\u7b49\u4e8e\u8fd0\u7b97\u7b26\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n  \u6240\u6709\u7c7b\u578b\u90fd\u652f\u6301\u8fd9\u4e9b\u3002\n<\/div>\n
\n  \u8ba9\u6211\u4eec\u4e3e\u4e24\u4e2a\u4f8b\u5b50\u6765\u5f88\u597d\u5730\u7406\u89e3\u5b83\u3002\u5728\u7b2c\u4e00\u4e2a\u793a\u4f8b\u4e2d\u4f7f\u7528\u76f8\u7b49\u8fd0\u7b97\u7b26(==)\u6d4b\u8bd5$ font\u53c2\u6570\u7684\u7c7b\u578b\u5e76\u6253\u5370\u76f8\u5e94\u7684\u6d88\u606f\u3002\n<\/div>\n
\n  \u8bf7\u53c2\u89c1\u4ee5\u4e0b\u793a\u4f8b:\n<\/div>\n
\n
\r\n@mixin font-fl($font){\r\n    &:after {\r\n        @if(type-of($font) == string) {\r\n            content: 'My font is: #{$font}.'<\/span>;<\/span>\r\n        } @else <\/span>{\r\n            content: 'Sorry, the argument #{$font} is a #{type-of($font)}.'<\/span>;<\/span>\r\n        }\r\n    }\r\n}\r\nh2{\r\n    @include font-fl(sans-serif);\r\n}<\/pre>\n
<\/code>\n<\/div>\n
\n  \u751f\u6210\u7684CSS\u5c06\u5177\u6709\u4ee5\u4e0b\u4ee3\u7801:\n<\/div>\n
\n
h2:after {\r\n    content: 'My font is: sans-serif.'<\/span>;\r\n}<\/pre>\n
<\/code>\n<\/div>\n
\n  \u7b2c\u4e8c\u4e2a\u793a\u4f8b\u5b9a\u4e49\u4e00\u4e2a\u5217\u8868\u5e76\u68c0\u67e5\u5176\u9879\u76ee\u7684\u957f\u5ea6\u3002\u5728\u8fd9\u91cc\uff0c\u4f7f\u7528\u4f59\u6570(\uff05)\u8fd0\u7b97\u7b26\u6765\u8bc4\u4f30\u5176\u957f\u5ea6\uff0c\u7136\u540e\u5c06color\u5c5e\u6027\u8bbe\u7f6e\u4e3ah2\u5143\u7d20\u3002\n<\/div>\n
\n  \u8bf7\u53c2\u89c1\u4ee5\u4e0b\u793a\u4f8b:\n<\/div>\n
\n
\r\n$list: \"red\"<\/span>, \"yellow\"<\/span>, \"lightblue\"<\/span>;\r\n@mixin fg-color($property) {\r\n    @each $item in $list {\r\n        $color-length: str-length($item);\r\n        @if( $color-length % 2 != 0 ) {\r\n            #{$property}: unquote($item);<\/span>\r\n        }\r\n    }\r\n}\r\nh2 {\r\n    @include fg-color(color);\r\n}<\/pre>\n
<\/code>\n<\/div>\n
\n  \u751f\u6210\u7684CSS\u5c06\u5177\u6709\u4ee5\u4e0b\u4ee3\u7801:\n<\/div>\n
\n
\r\nh2 {\r\n    color: lightblue;\r\n}<\/pre>\n
<\/code>\n<\/div>\n
\n  \u6ce8\u610f: : Sass\u4e0d\u50cf\u5176\u4ed6\u8bed\u8a00\u4e00\u6837\u652f\u6301\u4e25\u683c\u76f8\u7b49\u8fd0\u7b97\u7b26(===)\u3002\n<\/div>\n
\n
 4)\u6bd4\u8f83\u8fd0\u7b97\u7b26<\/h2>\n
\n  \u6bd4\u8f83\u8fd0\u7b97\u7b26\u4e0e\u76f8\u7b49\u8fd0\u7b97\u7b26\u76f8\u4f3c\uff0c\u4f46\u5b83\u4eec\u4ec5\u7528\u4e8e\u6bd4\u8f83\u6570\u5b57\u3002\n<\/div>\n
\n  \u6bd4\u8f83\u8fd0\u7b97\u7b26\u5217\u8868\u5728Sass\u4e2d\u53d7\u652f\u6301:\n<\/div>\n\n\n\n\n\n\n\n
\u64cd\u4f5c\u7b26<\/td>\n\u8bf4\u660e<\/td>\n<\/tr>\n
 > <\/td>\n\u5b83\u6307\u5b9a\u4e00\u4e2a\u5927\u4e8e\u6bd4\u8f83\u8fd0\u7b97\u7b26\u3002<\/td>\n<\/tr>\n
 >= <\/td>\n\u5b83\u6307\u5b9a\u4e00\u4e2a\u5927\u4e8e\u6216\u7b49\u4e8e\u6bd4\u8f83\u8fd0\u7b97\u7b26\u3002 <\/td>\n<\/tr>\n
 < <\/td>\n\u5b83\u6307\u5b9a\u5c0f\u4e8e\u6bd4\u8f83\u8fd0\u7b97\u7b26\u3002<\/td>\n<\/tr>\n
<= <\/td>\n\u5b83\u6307\u5b9a\u5c0f\u4e8e\u6216\u7b49\u4e8e\u6bd4\u8f83\u8fd0\u7b97\u7b26\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n  \u8bf7\u53c2\u89c1\u4ee5\u4e0b\u793a\u4f8b:\n<\/div>\n
\n
\r\n$padding: 50px;\r\nh2 {\r\n    @if($padding <= 20px) {\r\n        padding: $padding;\r\n    } @else <\/span>{\r\n        padding: $padding \/ 2;\r\n    }\r\n}<\/pre>\n
<\/code>\n<\/div>\n
\n  \u7f16\u8bd1\u540e\uff0c\u751f\u6210\u7684CSS\u5c06\u5177\u6709\u4ee5\u4e0b\u4ee3\u7801\u3002\n<\/div>\n
\n
\r\nh2 {\r\n  padding: 25px;\r\n}<\/pre>\n
<\/code>\n<\/div>\n
\n
 5)\u903b\u8f91\u8fd0\u7b97\u7b26<\/h2>\n
\n  \u903b\u8f91\u8fd0\u7b97\u7b26\u7528\u4e8e\u6d4b\u8bd5\u6761\u4ef6\u8868\u8fbe\u5f0f\u4e2d\u7684\u591a\u4e2a\u6761\u4ef6\u3002\n<\/div>\n
\n  Sass\u652f\u6301\u7684\u903b\u8f91\u8fd0\u7b97\u7b26\u5217\u8868:\n<\/div>\n\n\n\n\n\n\n
\u64cd\u4f5c\u7b26<\/td>\n\u6761\u4ef6<\/td>\n\u8bf4\u660e<\/td>\n<\/tr>\n
and<\/td>\n x\u548cy <\/td>\n\u5982\u679cx\u548cy\u5747\u4e3atrue\uff0c\u5219\u6307\u5b9atrue\u3002 <\/td>\n<\/tr>\n
or<\/td>\n x\u6216y <\/td>\n\u5982\u679cx\u6216y\u4e3atrue\uff0c\u5219\u6307\u5b9atrue\u3002<\/td>\n<\/tr>\n
not<\/td>\n x <\/td>\n\u5982\u679cx\u4e0d\u4e3a\u771f\uff0c\u5219\u4e3a\u771f\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n  \u8ba9\u6211\u4eec\u4e3e\u4e2a\u4f8b\u5b50\u6765\u5f88\u597d\u5730\u7406\u89e3\u5b83:\n<\/div>\n
\n  \u8fd9\u4e2a\u4f8b\u5b50\u5305\u542b\u6309\u94ae\u72b6\u6001\u4f5c\u4e3a\u952e\uff0c\u76f8\u5e94\u7684\u989c\u8272\u4f5c\u4e3a\u503c\u3002\u7136\u540e\uff0c\u6211\u4eec\u6307\u5b9a\u4e00\u4e2a\u6761\u4ef6\u4ee5\u8bc4\u4f30\u5176\u957f\u5ea6\u3002\u5982\u679c\u6574\u4e2a\u6761\u4ef6\u4e3atrue\uff0c\u5b83\u5c06\u80cc\u666f\u989c\u8272\u5e94\u7528\u4e8eh2\u5143\u7d20\u3002\n<\/div>\n
\n  Sass\u8bed\u6cd5:\n<\/div>\n
\n
\r\n$list-map: (success: lightgreen, alert: red, info: lightblue);\r\n@mixin button-state($btn-state) {\r\n    @if <\/span>(length($list-map) > 2 or length($list-map) < 5) {\r\n        background-color: map-get($list-map, $btn-state);\r\n    }\r\n}\r\n.btn {\r\n    @include button-state(success);\r\n}<\/pre>\n
<\/code>\n<\/div>\n
\n
\r\n.btn {\r\n    background-color: lightgreen;\r\n}<\/pre>\n
<\/code>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Sass \u8fd0\u7b97\u7b26zh-cn","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[173],"tags":[],"class_list":["post-2316","post","type-post","status-publish","format-standard","hentry","category-sass-jc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2316"}],"collection":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/comments?post=2316"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2316\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=2316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=2316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=2316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}