{"id":816,"date":"2019-06-25T15:40:33","date_gmt":"2019-06-25T07:40:33","guid":{"rendered":"https:\/\/wyxxt.org.cn\/?p=816"},"modified":"2023-12-04T17:00:17","modified_gmt":"2023-12-04T09:00:17","slug":"sass-css%e9%a2%84%e5%a4%84%e7%90%86%e5%99%a8","status":"publish","type":"post","link":"https:\/\/wyxxt.org.cn\/?p=816","title":{"rendered":"Sass\u2014\u2014css\u9884\u5904\u7406\u5668"},"content":{"rendered":"<h2>\u4ec0\u4e48\u662fcss<\/h2>\n<p>CSS\u4e0d\u662f\u7f16\u7a0b\u8bed\u8a00\uff0cCSS\u57fa\u672c\u4e0a\u662f\u8bbe\u8ba1\u5e08\u7684\u5de5\u5177\u3002\u5b83\u6ca1\u6709\u53d8\u91cf\uff0c\u4e5f\u6ca1\u6709\u6761\u4ef6\u8bed\u53e5\uff0c\u53ea\u662f\u4e00\u884c\u884c\u5355\u7eaf\u7684\u63cf\u8ff0\uff0c\u5199\u8d77\u6765\u76f8\u5f53\u8d39\u4e8b\u3002<\/p>\n<h2>\u4ec0\u4e48\u662fsass<\/h2>\n<p>SASS\u662f\u4e00\u79cdCSS\u7684\u5f00\u53d1\u5de5\u5177\uff0c\u4f7f\u7528\u7f16\u7a0b\u601d\u60f3\u5199CSS\u3002<\/p>\n<h2>vue\u4e2d\u5b89\u88c5sass<\/h2>\n<pre><code class=\"language-shell line-numbers\">npm i -D sass sass-loader\n<\/code><\/pre>\n<h2>sass\u4f7f\u7528\u8bed\u6cd5<\/h2>\n<p><em>\u6587\u4ef6\u540e\u7f00.scss<\/em><\/p>\n<h3>1\u3001\u53d8\u91cf<\/h3>\n<p>\u4ee5$\u5f00\u5934<\/p>\n<pre><code class=\"language-sass line-numbers\">$blue : #1875e7;\n\ndiv {\n    color : $blue;\n}\n<\/code><\/pre>\n<p>\u5982\u679c\u53d8\u91cf\u9700\u8981\u9576\u5d4c\u5728\u5b57\u7b26\u4e32\u4e4b\u4e2d\uff0c\u5c31\u5fc5\u987b\u9700\u8981\u5199\u5728#{}\u4e4b\u4e2d\u3002<\/p>\n<pre><code class=\"language-sass line-numbers\">$side : left;\n\n.rounded {\n    border-#{$side}-radius: 5px;\n}\n<\/code><\/pre>\n<h3>2\u3001\u8ba1\u7b97<\/h3>\n<pre><code class=\"language-sass line-numbers\">body {\n    margin: (14px\/2);\n    top: 50px + 100px;\n    right: $var * 10%;\n}\n<\/code><\/pre>\n<h3>3\u3001\u5d4c\u5957<\/h3>\n<pre><code class=\"language-sass line-numbers\">.hello {\n    h1 {\n        color: red;\n    }\n\n    h3 {\n        color: blue;\n    }\n}\n<\/code><\/pre>\n<p>\u5728\u5d4c\u5957\u7684\u4ee3\u7801\u5757\u5185\uff0c\u53ef\u4ee5\u4f7f\u7528&amp;\u5f15\u7528\u7236\u5143\u7d20\u3002\u6bd4\u5982a:hover\u4f2a\u7c7b\uff0c\u53ef\u4ee5\u5199\u6210\uff1a<\/p>\n<pre><code class=\"language-sass line-numbers\">a {\n    &amp;:hover { color: #ffb3ff; }\n}\n<\/code><\/pre>\n<h3>4\u3001\u6ce8\u91ca<\/h3>\n<pre><code class=\"language-sass line-numbers\">\/\/\u53ea\u4fdd\u7559\u5728SASS\u6e90\u6587\u4ef6\u4e2d\uff0c\u7f16\u8bd1\u540e\u88ab\u7701\u7565\n\n\/*  \n    \u4f1a\u4fdd\u7559\u5230\u7f16\u8bd1\u540e\u7684\u6587\u4ef6 \n    *\/\n\n\/*! \n    \u91cd\u8981\u6ce8\u91ca\uff01\n    *\/\n<\/code><\/pre>\n<h3>5\u3001\u7ee7\u627f<\/h3>\n<pre><code class=\"language-sass line-numbers\">.class1 {\n    border: 1px solid #ddd;\n}\n\n.class2 {\n    @extend .class1;\n    font-size:120%;\n}\n<\/code><\/pre>\n<h3>6\u3001Mixin<\/h3>\n<p>\u4f7f\u7528@mixin\u547d\u4ee4\uff0c\u5b9a\u4e49\u4e00\u4e2a\u4ee3\u7801\u5757\u3002<\/p>\n<pre><code class=\"language-sass line-numbers\">@mixin left {\n    float: left;\n    margin-left: 10px;\n}\n<\/code><\/pre>\n<p>\u4f7f\u7528@include\u547d\u4ee4\uff0c\u8c03\u7528\u8fd9\u4e2amixin\u3002<\/p>\n<pre><code class=\"language-sass line-numbers\">div {\n    @include left;\n}\n<\/code><\/pre>\n<p>mixin\u7684\u5f3a\u5927\u4e4b\u5904\uff0c\u5728\u4e8e\u53ef\u4ee5\u6307\u5b9a\u53c2\u6570\u548c\u7f3a\u7701\u503c\u3002<\/p>\n<pre><code class=\"language-sass line-numbers\">@mixin left($value: 10px) {\n    float: left;\n    margin-right: $value;\n}\n\ndiv {\n    @include left(20px);\n}\n<\/code><\/pre>\n<h3>7\u3001\u989c\u8272\u51fd\u6570<\/h3>\n<pre><code class=\"language-sass line-numbers\">lighten(#cc3, 10%) \/\/ #d6d65c\ndarken(#cc3, 10%) \/\/ #a3a329\ngrayscale(#cc3) \/\/ #808080\ncomplement(#cc3) \/\/ #33c\n<\/code><\/pre>\n<h3>8\u3001\u63d2\u5165\u6587\u4ef6<\/h3>\n<pre><code class=\"language-sass line-numbers\">@import \"path\/filename.scss\";\n<\/code><\/pre>\n<h3>9\u3001\u6761\u4ef6\u8bed\u53e5<\/h3>\n<pre><code class=\"language-sass line-numbers\">@if lightness($color) &gt; 30% {\n    background-color: #000;\n} @else {\n    background-color: #fff;\n}\n<\/code><\/pre>\n<h3>10\u3001for\u5faa\u73af<\/h3>\n<pre><code class=\"language-sass line-numbers\">@for $i from 1 to 10 {\n    .border-#{$i} {\n        border: #{$i}px solid blue;\n    }\n}\n<\/code><\/pre>\n<h3>11\u3001while\u5faa\u73af<\/h3>\n<pre><code class=\"language-sass line-numbers\">$i: 6;\n@while $i &gt; 0 {\n    .item-#{$i} { width: 2em * $i; }\n    $i: $i - 2;\n}\n<\/code><\/pre>\n<h3>12\u3001each\u547d\u4ee4\uff0c\u4f5c\u7528\u4e0efor\u7c7b\u4f3c<\/h3>\n<pre><code class=\"language-sass line-numbers\">@each $member in a, b, c, d {\n    .#{$member} {\n        background-image: url(\"\/image\/#{$member}.jpg\");\n    }\n}\n<\/code><\/pre>\n<h3>13\u3001\u81ea\u5b9a\u4e49\u51fd\u6570<\/h3>\n<pre><code class=\"language-sass line-numbers\">@function double($n) {\n    @return $n * 2;\n}\n\n#sidebar {\n    width: double(5px);\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u4ec0\u4e48\u662fcss CSS\u4e0d\u662f\u7f16\u7a0b\u8bed\u8a00\uff0cCSS\u57fa\u672c\u4e0a\u662f\u8bbe\u8ba1\u5e08\u7684\u5de5\u5177\u3002\u5b83\u6ca1\u6709\u53d8\u91cf\uff0c\u4e5f\u6ca1\u6709\u6761\u4ef6\u8bed\u53e5\uff0c\u53ea\u662f\u4e00\u884c\u884c\u5355\u7eaf\u7684\u63cf\u8ff0 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[15],"tags":[413],"class_list":["post-816","post","type-post","status-publish","format-standard","hentry","category-15","tag-css"],"_links":{"self":[{"href":"https:\/\/wyxxt.org.cn\/index.php?rest_route=\/wp\/v2\/posts\/816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wyxxt.org.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wyxxt.org.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wyxxt.org.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wyxxt.org.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=816"}],"version-history":[{"count":2,"href":"https:\/\/wyxxt.org.cn\/index.php?rest_route=\/wp\/v2\/posts\/816\/revisions"}],"predecessor-version":[{"id":818,"href":"https:\/\/wyxxt.org.cn\/index.php?rest_route=\/wp\/v2\/posts\/816\/revisions\/818"}],"wp:attachment":[{"href":"https:\/\/wyxxt.org.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wyxxt.org.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wyxxt.org.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}