{"id":589,"date":"2012-10-29T11:38:48","date_gmt":"2012-10-29T03:38:48","guid":{"rendered":"https:\/\/yanjingang.com\/blog\/?p=589"},"modified":"2016-03-10T11:39:25","modified_gmt":"2016-03-10T03:39:25","slug":"%e7%94%a8less%e7%ae%a1%e7%90%86%e4%bd%a0%e7%9a%84css%ef%bc%8c%e9%ab%98%e6%95%88%e3%80%81%e5%8f%af%e7%bb%b4%e6%8a%a4","status":"publish","type":"post","link":"https:\/\/yanjingang.com\/blog\/?p=589","title":{"rendered":"\u7528LESS\u7ba1\u7406\u4f60\u7684CSS\uff0c\u9ad8\u6548\u3001\u53ef\u7ef4\u62a4"},"content":{"rendered":"

\u5982\u679c\u4f60\u7684\u9879\u76ee\u4e2d\u9700\u8981\u5199\u7684css\u7279\u522b\u591a\uff0c\u90a3\u4e48\u4f60\u53ef\u4ee5\u5c1d\u8bd5\u4e00\u4e0b\u4f7f\u7528less\u53bb\u7ba1\u7406\u4f60\u7684css\u3002<\/p>\n

less\u662f\u4e00\u79cd\u52a8\u6001\u6837\u5f0f\u8bed\u8a00\uff0c\u65e2\u80fd\u8dd1\u5728\u6d4f\u89c8\u5668\u4e2d\u4e5f\u80fd\u8dd1\u5728\u670d\u52a1\u7aef\uff08\u4e0enode\uff09\u3002
\nless\u7684\u5b98\u7f51\uff1ahttp:\/\/lesscss.org\/<\/a><\/p>\n

\u4e0b\u9762\u4ecb\u7ecd\u4e0bless\u7279\u6027\uff1a
\n1\u3001\u4f60\u53ef\u4ee5\u5728\u6700\u524d\u9762\u5b9a\u4e49\u597d\u4f60\u7684\u5168\u5c40\u6837\u5f0f\uff0c\u4e0b\u9762\u53ef\u4ee5\u91cd\u7528<\/p>\n

\n
\n
?<\/a><\/div>\n\n\n\n
\n
\n
\/\/ LESS<\/code><\/div>\n
@color:<\/code> #4D926F;<\/code><\/div>\n
<\/div>\n
#header {<\/code><\/div>\n
\u00a0\u00a0<\/code>color: @color;<\/code><\/div>\n
}<\/code><\/div>\n
h2 {<\/code><\/div>\n
\u00a0\u00a0<\/code>color: @color;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
\n
\n
?<\/a><\/div>\n\n\n\n
\n
\n
\/* Compiled CSS *\/<\/code><\/div>\n
<\/div>\n
#header {<\/code><\/div>\n
\u00a0\u00a0<\/code>color:<\/code> #4D926F;<\/code><\/div>\n
}<\/code><\/div>\n
h2 {<\/code><\/div>\n
\u00a0\u00a0<\/code>color:<\/code> #4D926F;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

2\u3001\u4f60\u53ef\u4ee5\u50cf\u51fd\u6570\u4e00\u6837\u8c03\u7528\u4e00\u4e2a\u5199\u597d\u7684class\uff08\u4f46\u5fc5\u987b\u662f\u6574\u4e2a\u7684\u5f15\u5165\uff09\uff0c\u5e76\u4e14\u53ef\u4ee5\u4f20\u53c2\uff0c\u592a\u5f3a\u5927\u4e86<\/p>\n

\n
\n
?<\/a><\/div>\n\n\n\n
\n
\n
\/\/ LESS<\/code><\/div>\n
<\/div>\n
.rounded-corners (@radius: 5px) {<\/code><\/div>\n
\u00a0\u00a0<\/code>border-radius: @radius;<\/code><\/div>\n
\u00a0\u00a0<\/code>-webkit-border-radius: @radius;<\/code><\/div>\n
\u00a0\u00a0<\/code>-moz-border-radius: @radius;<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
#header {<\/code><\/div>\n
\u00a0\u00a0<\/code>.rounded-corners;<\/code><\/div>\n
}<\/code><\/div>\n
#footer {<\/code><\/div>\n
\u00a0\u00a0<\/code>.rounded-corners(10px);<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
\n
\n
?<\/a><\/div>\n\n\n\n
\n
\n
\/* Compiled CSS *\/<\/code><\/div>\n
<\/div>\n
#header {<\/code><\/div>\n
\u00a0\u00a0<\/code>border-radius: 5px;<\/code><\/div>\n
\u00a0\u00a0<\/code>-webkit-border-radius: 5px;<\/code><\/div>\n
\u00a0\u00a0<\/code>-moz-border-radius: 5px;<\/code><\/div>\n
}<\/code><\/div>\n
#footer {<\/code><\/div>\n
\u00a0\u00a0<\/code>border-radius: 10px;<\/code><\/div>\n
\u00a0\u00a0<\/code>-webkit-border-radius: 10px;<\/code><\/div>\n
\u00a0\u00a0<\/code>-moz-border-radius: 10px;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

3\u3001\u5d4c\u5957\u89c4\u5219\u8ba9\u4f60\u66f4\u5bb9\u6613\u53bb\u5199\u6a21\u5757css<\/p>\n

\n
\n
?<\/a><\/div>\n\n\n\n
\n
\n
\/\/ LESS<\/code><\/div>\n
<\/div>\n
#header {<\/code><\/div>\n
\u00a0\u00a0<\/code>h1 {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>font-size: 26px;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>font-weight: bold;<\/code><\/div>\n
\u00a0\u00a0<\/code>}<\/code><\/div>\n
\u00a0\u00a0<\/code>p { font-size: 12px;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>a { text-decoration: none;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>&:hover { border-width: 1px }<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
\u00a0\u00a0<\/code>}<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
\n
\n
?<\/a><\/div>\n\n\n\n
\n
\n
\/* Compiled CSS *\/<\/code><\/div>\n
<\/div>\n
#header h1 {<\/code><\/div>\n
\u00a0\u00a0<\/code>font-size: 26px;<\/code><\/div>\n
\u00a0\u00a0<\/code>font-weight: bold;<\/code><\/div>\n
}<\/code><\/div>\n
#header p {<\/code><\/div>\n
\u00a0\u00a0<\/code>font-size: 12px;<\/code><\/div>\n
}<\/code><\/div>\n
#header p a {<\/code><\/div>\n
\u00a0\u00a0<\/code>text-decoration: none;<\/code><\/div>\n
}<\/code><\/div>\n
#header p a:hover {<\/code><\/div>\n
\u00a0\u00a0<\/code>border-width: 1px;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

4\u3001\u6211\u4eec\u5c45\u7136\u53ef\u4ee5\u7528less\u50cfjavascript\u90a3\u6837\u8ba1\u7b97<\/p>\n

\n
\n
?<\/a><\/div>\n\n\n\n
\n
\n
\/\/ LESS<\/code><\/div>\n
<\/div>\n
@the-border: 1px;<\/code><\/div>\n
@base-color:<\/code> #111;<\/code><\/div>\n
@red:<\/code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 #842210;<\/code><\/div>\n
<\/div>\n
#header {<\/code><\/div>\n
\u00a0\u00a0<\/code>color: @base-color * 3;<\/code><\/div>\n
\u00a0\u00a0<\/code>border-left: @the-border;<\/code><\/div>\n
\u00a0\u00a0<\/code>border-right: @the-border * 2;<\/code><\/div>\n
}<\/code><\/div>\n
#footer {<\/code><\/div>\n
\u00a0\u00a0<\/code>color: @base-color +<\/code> #003300;<\/code><\/div>\n
\u00a0\u00a0<\/code>border-color: desaturate(@red, 10%);<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
\n
\n
?<\/a><\/div>\n\n\n\n
\n
\n
\/* Compiled CSS *\/<\/code><\/div>\n
<\/div>\n
#header {<\/code><\/div>\n
\u00a0\u00a0<\/code>color:<\/code> #333;<\/code><\/div>\n
\u00a0\u00a0<\/code>border-left: 1px;<\/code><\/div>\n
\u00a0\u00a0<\/code>border-right: 2px;<\/code><\/div>\n
}<\/code><\/div>\n
#footer {<\/code><\/div>\n
\u00a0\u00a0<\/code>color:<\/code> #114411;<\/code><\/div>\n
\u00a0\u00a0<\/code>border-color:<\/code> #7d2717;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

\u5ba2\u6237\u7aef\u5982\u4f55\u4f7f\u7528\uff1a
\n\u9996\u5148\u5f15\u5165\u4f60\u81ea\u5df1\u5199\u7684\u6837\u5f0f\uff0cless\u5199\u7684\u6837\u5f0f\u6587\u4ef6\u4ee5less\u540e\u7f00\u7ed3\u5c3e<\/p>\n

\n
\n
?<\/a><\/div>\n\n\n\n
\n
\n
<link rel=<\/code>\"stylesheet\/less\"<\/code> type=<\/code>\"text\/css\"<\/code> href=<\/code>\"styles.less\"<\/code>><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

\u518d\u5f15\u5165less.js\uff08\u4e00\u5b9a\u8981\u5148\u5f15\u5165\u4f60\u81ea\u5b9a\u4e49\u7684less\u6837\u5f0f\uff0c\u518d\u5f15\u5165less.js\uff09<\/p>\n

\n
\n
?<\/a><\/div>\n\n\n\n
\n
\n
<script src=<\/code>\"less.js\"<\/code> type=<\/code>\"text\/javascript\"<\/code>><\/script><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

\u670d\u52a1\u7aef\u4f7f\u7528\u65b9\u6cd5\uff1a
\n\u6700\u7b80\u5355\u7684\u65b9\u5f0f\u662f\u901a\u8fc7npm\u5b89\u88c5<\/p>\n

\n
\n
?<\/a><\/div>\n\n\n\n
\n
\n
$ npm install less<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

\u66f4\u591a\u8bf7\u79fb\u6b65less\u5b98\u7f51\u5427\uff1ahttp:\/\/lesscss.org\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

\u5982\u679c\u4f60\u7684\u9879\u76ee\u4e2d\u9700\u8981\u5199\u7684css\u7279\u522b\u591a\uff0c\u90a3\u4e48\u4f60\u53ef\u4ee5\u5c1d\u8bd5\u4e00\u4e0b\u4f7f\u7528less\u53bb\u7ba1\u7406\u4f60\u7684css\u3002 less\u662f\u4e00\u79cd\u52a8\u6001\u6837\u5f0f\u8bed […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[118],"tags":[119,322],"_links":{"self":[{"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/589"}],"collection":[{"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=589"}],"version-history":[{"count":0,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/589\/revisions"}],"wp:attachment":[{"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}