คำถามติดแท็ก less

หักคอมไพเลอร์ที่ผมใช้ ( OrangeBitsและdotless 1.3.0.5 ) จะอุกอาจแปล body { width: calc(100% - 250px - 1.5em); } เข้าไป body { width: calc(-151.5%); } ซึ่งเห็นได้ชัดว่าไม่ต้องการ ฉันสงสัยว่ามีวิธีส่งสัญญาณไปยังผู้รวบรวมน้อยกว่าหรือไม่เพื่อเพิกเฉยต่อแอตทริบิวต์ในระหว่างการรวบรวม ฉันค้นหาเอกสารน้อยกว่าและเอกสารของทั้งสองคอมไพเลอร์และฉันไม่พบอะไรเลย คอมไพเลอร์น้อยลงหรือน้อยลงสนับสนุนสิ่งนี้หรือไม่ ถ้าไม่มีจะมีตัวขยาย CSS ที่ใช้งานได้หรือไม่

336 css  compilation  less  css-calc 

ปิด คำถามนี้เป็นคำถามความคิดเห็นตาม ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้สามารถตอบข้อเท็จจริงและการอ้างอิงได้โดยแก้ไขโพสต์นี้ ปิดให้บริการใน6 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันทำงานกับ Bootstrap 2.0.3 โดยใช้ LESS ฉันต้องการปรับแต่งมันอย่างกว้างขวาง แต่ฉันต้องการหลีกเลี่ยงการเปลี่ยนแปลงแหล่งที่มาเมื่อใดก็ตามที่เป็นไปได้เนื่องจากการเปลี่ยนแปลงในไลบรารีเป็นประจำ ฉันใหม่สำหรับ LESS ดังนั้นฉันจึงไม่ทราบว่าการรวบรวมนั้นใช้งานได้อย่างไร อะไรคือแนวปฏิบัติที่ดีที่สุดสำหรับการทำงานกับกรอบ LESS หรือ LESS

285 twitter-bootstrap  less 

คุณสามารถนำเข้าไฟล์. css เป็นไฟล์ .less ... ได้หรือไม่ ฉันคุ้นเคยกับมันน้อยกว่าและใช้เพื่อการพัฒนาของฉันทั้งหมด ฉันใช้โครงสร้างเป็นประจำดังนี้: @import "normalize"; //styles here @import "mixins"; @import "media-queries"; @import "print"; การนำเข้าทั้งหมดเป็นไฟล์ .less อื่น ๆ และใช้งานได้ตามที่ควรจะเป็น ปัญหาปัจจุบันของฉันคือสิ่งนี้: ฉันต้องการนำเข้าไฟล์. css ไปที่. เว้นแต่ว่าการอ้างอิงสไตล์ที่ใช้ในไฟล์. css ดังต่อไปนี้: @import "../style.css"; .small { font-size:60%; .type; } // other styles here ไฟล์. css มีคลาสที่เรียกว่า.typeแต่เมื่อฉันพยายามคอมไพล์ไฟล์ .less ฉันได้รับข้อผิดพลาดNameError: .type is undefined ไฟล์ …

228 css  import  less 

ใช้น้อยฉันรู้ว่าฉันสามารถเปลี่ยนความอิ่มตัวหรือสีอ่อนของตัวแปรสี ดูเหมือนว่า: background: lighten(@blue, 20%); ฉันต้องการเปลี่ยนความทึบของสีของฉันเอง ชอบสิ่งนี้: background: alpha(@blue, 20%); มีวิธีการง่ายๆใน LESS หรือไม่?

171 css  variables  less  opacity  alpha 

ฉันมีรหัสต่อไปนี้: @color : #d14836; .stripes span { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)), color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent), to(transparent)); ฉันต้องแปลงไป@colorrgba(209, 72, 54, 1) ดังนั้นฉันต้องแทนที่rgba(209, 72, …

131 css  less 

ฉันคิดว่านี่เป็นไปไม่ได้ แต่ฉันคิดว่าฉันถามในกรณีที่มีวิธี แนวคิดคือฉันมีตัวแปรสำหรับพา ธ ไปยังโฟลเดอร์ทรัพยากรบนเว็บ: @root: "../img/"; @file: "test.css"; @url: @root@file; .px { background-image: url(@url); } ฉันได้รับสิ่งนี้เป็นผล: .px { background-image: url("../img/" "test.css"); } แต่ฉันต้องการให้สตริงรวมกันเป็นสตริงเดียวดังนี้: .px { background-image: url("../img/test.css"); } เป็นไปได้ไหมที่จะต่อสตริงเข้าด้วยกันใน Less?

129 css  path  web  less  concat 

จะมีการให้ LESS ใช้ตัวเลือกลูกทันที (>) ในผลลัพธ์หรือไม่? ในสไตล์ของฉันฉันต้องการเขียนสิ่งที่ชอบ: .panel { ... > .control { ... } } และมี LESS สร้างสิ่งที่ต้องการ: .panel > .control { ... }

112 css  css-selectors  less 

ฉันเคยใช้LESS.jsมาก่อน ใช้งานง่ายบางอย่างเช่น <link rel="stylesheet/less" href="main.less" type="text/css"> <script src="less.js" type="text/javascript"></script> ผมเห็นSASS.js ฉันจะใช้มันในลักษณะเดียวกันได้อย่างไร? การแยกวิเคราะห์ไฟล์ SASS เพื่อใช้ใน HTML ทันที ดูเหมือนว่า SASS.js จะใช้กับNode.js มากกว่า ? var sass = require('sass') sass.render('... string of sass ...') // => '... string of css ...' sass.collect('... string of sass ...') // => { selectors: [...], variables: { ... …

112 css  sass  less 

ฉันได้ติดตั้งไอคอนฟอนต์ 4.0.3 ที่ยอดเยี่ยมโดยใช้npm install. หากฉันต้องการใช้จากโมดูลโหนดฉันจะใช้ในไฟล์ html ได้อย่างไร หากฉันต้องการแก้ไขไฟล์ที่น้อยกว่าฉันจำเป็นต้องแก้ไขในโมดูลโหนดหรือไม่

111 css  node.js  less  npm  font-awesome 

ฉันต้องการใช้ Twitter Bootstrap แต่เฉพาะในองค์ประกอบบางอย่างเท่านั้นดังนั้นฉันจึงต้องหาวิธีนำหน้าคลาส Twitter Bootstrap ทั้งหมดด้วยคำนำหน้าของฉันหรือใช้ส่วนผสมที่น้อยกว่า ฉันยังไม่มีประสบการณ์เกี่ยวกับเรื่องนี้ดังนั้นฉันจึงไม่ค่อยเข้าใจวิธีการทำเช่นนี้ นี่คือตัวอย่างของ HTML ที่ฉันพยายามจัดรูปแบบ: <div class="normal-styles"> <h1>dont style this with bootstrap</h1> <div class="bootstrap-styles"> <h1>use bootstrap</h1> </div> </div> ในตัวอย่างนี้ Twitter Bootstrap จะใช้รูปแบบปกติทั้งคู่h1แต่ฉันต้องการเลือกมากขึ้นเกี่ยวกับพื้นที่ที่ฉันใช้สไตล์ Twitter Bootstrap

106 twitter-bootstrap  less 

ฉันใช้ LESS เพื่อปรับปรุง CSS และกำลังพยายามซ้อนคลาสภายในคลาส มีลำดับชั้นที่ค่อนข้างซับซ้อน แต่ด้วยเหตุผลบางประการการซ้อนของฉันไม่ทำงาน ฉันมีสิ่งนี้: .g { float: left; color: #323a13; .border(1px,#afc945); .gradient(#afc945, #c8da64); .common; span { .my-span; .border-dashed(1px,rgba(255,255,255,0.3)); } .posted { .my-posted; span { border: none; } } } ฉันไม่สามารถ.g.postedไปทำงานได้ มันแสดงให้เห็นเพียง.gเล็กน้อย ถ้าฉันทำมันก็โอเค: .g { float: left; color: #323a13; .border(1px,#afc945); .gradient(#afc945, #c8da64); .common; span { .my-span; .border-dashed(1px,rgba(255,255,255,0.3)); …

101 css  nested  less 

ฉันจะคำนวณความกว้างในองค์ประกอบจากร้อยละพิกเซลดังนั้นฉันจะลบ -10px ผ่านการใช้น้อยลงและขจัดตะกรัน () มันเป็นไปได้? div { span { width:calc(100% - 10px); } } ฉันใช้ CSS3 calc()ดังนั้นจึงไม่ทำงาน:calc(100% - 10px) ตัวอย่าง:ถ้า 100% = 500px ดังนั้น width = 490px (500-10); ฉันทำการสาธิตสำหรับการทดสอบ: http://jsfiddle.net/4DujZ/55/ ดังนั้นช่องว่างภายในจะพูดว่า: 5 (10px / 2) ตลอดเวลาเมื่อฉันปรับขนาด ฉันสามารถทำได้ในLESSหรือไม่? ฉันรู้วิธีทำใน jQuery และ CSS ง่ายๆเช่นการเว้นระยะขอบหรืออื่น ๆ ... แต่ฉันจะพยายามทำงานในLESSด้วยcalc()

101 css  less  pixel 

SASS มีคุณสมบัติที่เรียกว่า@extendซึ่งทำให้ตัวเลือกสามารถสืบทอดคุณสมบัติของตัวเลือกอื่นได้ แต่ไม่ต้องคัดลอกคุณสมบัติ (เช่นมิกซ์อิน) LESS มีคุณสมบัตินี้ด้วยหรือไม่?

96 css  sass  less  extend 

ใน VS <= 2015 เราสามารถใช้ส่วนขยาย WebEssentials ที่ดูแลการคอมไพล์ไฟล์ less / sass ให้เราได้ แต่ตอนนี้ยังไม่รองรับ VS 2017 คุณทราบถึงส่วนขยายที่คล้ายกันที่สามารถคอมไพล์ less / sass ในบิลด์ได้หรือไม่?

85 visual-studio  sass  less  visual-studio-2017  css-preprocessor