首頁猿問應(yīng)該怎么寫sass，我寫的sass...

應(yīng)該怎么寫sass，我寫的sass該怎么修改簡潔？

JavaScript

開滿天機 2019-05-25 17:55:50

bodyfont-family:"HelveticaNeue",Helvetica,Arial,sans-seriffont-size:20pxcolor:#666background-color:#888mainmargin:80pxauto0autopadding:0px50pxheaderdisplay:flexflex-direction:rowflex-wrap:wrapjustify-content:space-aroundalign-content:space-aroundalign-items:flex-endpadding:50px30pxcolor:#fffbackground-color:#aaa.intro-textwidth:610pxmax-width:675pxmargin-bottom:30px.star-brightmargin:40pxauto30pxpadding:0max-width:512pxborder:0border-top:solid5pxtext-align:centerimgborder-radius:50%width:250pxheight:250pxmax-width:80%margin-top:30pxmargin-bottom:10pxsectionpadding:40px0background-color:#eeeh2text-align:center.star-darkmargin:40pxauto30pxpadding:0max-width:512pxborder:0border-top:solid5pxtext-align:centerborder-color:#888.griddisplay:flexflex-direction:rowflex-wrap:wrapjustify-content:space-aroundalign-content:space-aroundalign-items:flex-endmax-width:90%list-style:nonemargin:20pxautolimargin:20pxmax-width:600px@media(min-width:1023px)limax-width:420pximgmax-width:100%height:autodisplay:blockhrborder-color:#888#contacth2text-align:center.star-darkmargin:40pxauto30pxpadding:0max-width:512pxborder:0border-top:solid5pxtext-align:centerborder-color:#888>divdisplay:flexflex-direction:rowflex-wrap:wrapjustify-content:space-aroundalign-content:space-aroundalign-items:flex-startformwidth:80%.form-itemposition:relativemargin-bottom:10pxpadding-bottom:10pxborder-bottom:1pxsolid#bbblabeldisplay:blockz-index:0position:relativetop:2emmargin:0font-size:.85emline-height:1.764705882emvertical-align:middlevertical-align:baselineopacity:0-webkit-transition:top.3sease,opacity.3seasetransition:top.3sease,opacity.3seaseinputz-index:1position:relativepadding-right:0padding-left:0border:0border-radius:0font-size:1.5embackground:00box-shadow:none!importantresize:nonewidth:100%textareaz-index:1position:relativepadding-right:0padding-left:0border:0border-radius:0font-size:1.5embackground:00box-shadow:none!importantresize:nonewidth:100%@media(min-width:1023px)formwidth:40%margin-left:20px>divwidth:80%pmargin:60pxauto0max-width:700px@media(min-width:1023px)>divmax-width:38%pmargin-top:35pxp:last-childmargin-top:270pxfooterbackground-color:#000color:#ffftext-align:left.footer-abovedisplay:flexflex-direction:rowflex-wrap:wrapjustify-content:space-aroundalign-content:space-aroundalign-items:flex-startdivullist-style:none.footer-belowtext-align:center

查看完整描述

2 回答

蝴蝶不菲

TA貢獻(xiàn)1810條經(jīng)驗獲得超4個贊

有幾個建議，第一，不應(yīng)該使用標(biāo)簽選擇器，id選擇器，第二，層級最好不要超過三層，第三，配合cssmodule來模塊化你的css代碼，第四，屬性名排序問題，最簡單的按字母順序排序，或者也可以按屬性類別來排序，最好不要無序，這樣會導(dǎo)致的問題有當(dāng)屬性多了，會可能出現(xiàn)重復(fù)屬性。

反對回復(fù) 2019-05-25

繁星coding

TA貢獻(xiàn)1797條經(jīng)驗獲得超4個贊

我也有幾個建議，第一，利用好sass里的變量，將一些通用屬性進行提取，方便維護；第二，利用好模塊化，將sass文件進行分類。首先是提取公共樣式，比如section、button之類的，然后如果頁面不多但是每個頁面差異性較大可以按照頁面進行css文件的分別管理，如果頁面多但是有很多樣式共用的模塊，可根據(jù)功能進行模塊化，另外，一些nav、footer等也可單獨sass文件管理。如果頁面有許多css動畫，也可將動畫文件單獨管理。當(dāng)你出現(xiàn)有兩處css一模一樣時就該考慮提取了。第三，媒體查詢，我個人想法是就近原則，即就近每個模塊section，這樣方便對比管理。

反對回復(fù) 2019-05-25