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

ฉันมีตัวเลือก scss สองตัวที่ฉันใช้จำนวนบวกและลบเท่ากันดังใน: padding: 0 15px 15px; margin: 0 -15px 20px -15px; ฉันต้องการใช้ตัวแปรสำหรับจำนวน 15px ทั้งหมด แต่ไม่ได้ผล: $pad: 15px; padding: 0 $pad $pad; margin: 0 -$pad 20px -$pad; จำนวนมาร์จิ้นจะแปลงเป็นจำนวนบวก ฉันพลาดอะไรไปรึเปล่า?

108 css  sass  compass-sass 

ฉันต้องการใช้สีแบรนด์ของ บริษัท ของฉันตลอดทั้งแอป ฉันพบปัญหานี้: AngularJS 2 - การออกแบบวัสดุ - ตั้งค่าจานสีที่ฉันสามารถสร้างชุดรูปแบบที่กำหนดเองได้แต่โดยพื้นฐานแล้วจะใช้เพียงส่วนต่างๆของจานสีที่สร้างไว้ล่วงหน้า ฉันไม่ต้องการใช้สีที่กำหนดไว้ล่วงหน้าของ Material2 ฉันต้องการสีของแบรนด์ที่เป็นเอกลักษณ์และพิเศษของฉัน มีวิธีที่ดีกว่าในการสร้างธีมของตัวเอง_palette.scssไหม ฉันจำเป็นต้องทำมิกซ์อินสำหรับแบรนด์ของฉันหรือไม่? ถ้ามี - มีคำแนะนำเกี่ยวกับวิธีการทำอย่างถูกต้องหรือไม่? ความหมายของเฉดสีต่างๆ (มีตัวเลขเช่น 50, 100, 200, A100, A200 ... ) ข้อมูลใด ๆ เกี่ยวกับพื้นที่นี้จะได้รับการชื่นชมมาก!

108 angular  sass  material-design  angular-material2 

สวัสดีฉันกำลังพยายามเรียนรู้ SASS / SCSS และกำลังพยายาม refactor mixin ของตัวเองสำหรับ clearfix สิ่งที่ฉันต้องการคือให้ mixin ขึ้นอยู่กับว่าฉันส่งความกว้างของ mixin หรือไม่ ความคิดจนถึงตอนนี้ (รหัสหลอกเฉพาะที่ฉันจะรวมมิกซ์อินอื่น ๆ ) @mixin clearfix($width) { @if !$width { // if width is not passed, or empty do this } @else { display: inline-block; width: $width; } } นี่คือสิ่งที่ฉันคิดว่าฉันอาจเรียกมันได้ แต่มันไม่ได้ผล @include clearfix(); หรือ @include clearfix(100%) …

106 conditional  mixins  sass  if-statement 

มีวิธีใช้ Sass หรือ Compass หรืออะไรทำนองนั้นโดยไม่มี Ruby หรือไม่? ฉันมองหาทั่ว Google และไซต์นี้ แต่ไม่พบอะไรเลยขอความช่วยเหลือใด ๆ ขอบคุณ

102 css  sass  compass-sass 

คำถามพูดได้ทั้งหมด ตัวอย่างเช่นถ้าฉันใช้Twitter Bootstrapฉันสามารถกำหนดคลาสในสไตล์ชีต SASS ของตัวเองที่สืบทอดมาจากคลาส CSS ของ Bootstrap ได้หรือไม่ หรือการสืบทอดใน SASS ทำงานได้ภายในขอบเขตของไฟล์เดียวเท่านั้น?

102 css  inheritance  stylesheet  sass 

ตามที่กล่าวมาในปัจจุบันคำถามนี้ไม่เหมาะสำหรับรูปแบบถาม & ตอบของเรา เราคาดหวังว่าคำตอบจะได้รับการสนับสนุนจากข้อเท็จจริงการอ้างอิงหรือความเชี่ยวชาญ แต่คำถามนี้อาจก่อให้เกิดการถกเถียงโต้แย้งการสำรวจความคิดเห็นหรือการอภิปรายเพิ่มเติม หากคุณรู้สึกว่าคำถามนี้สามารถปรับปรุงได้และอาจเปิดขึ้นมาใหม่ได้โปรดไปที่ศูนย์ช่วยเหลือเพื่อรับคำแนะนำ ปิดให้บริการใน7 ปีที่ผ่านมา ฉันกำลังมองหาวิธีใช้SASS (Syntactically Awesome StyleSheets) จากแพ็คเกจ Ruby HAML ในสภาพแวดล้อม ASP.NET ตามหลักการแล้วฉันต้องการรวบรวมไฟล์ SASS ลงใน CSS เพื่อเป็นส่วนหนึ่งของกระบวนการสร้างที่ราบรื่น วิธีใดที่ดีที่สุดในการผสานรวมนี้ หรือมีเครื่องมือสร้าง CSS อื่น ๆ ที่เหมาะกับสภาพแวดล้อม. NET หรือไม่?

101 asp.net  css  sass 

ฉันมีปัญหากับการทำรังใน Sass สมมติว่าฉันมี HTML ต่อไปนี้: <p href="#" class="item">Text</p> <p href="#" class="item">Text</p> <a href="#" class="item">Link</a> เมื่อฉันพยายามซ้อนสไตล์ของฉันในสิ่งต่อไปนี้ฉันได้รับข้อผิดพลาดในการคอมไพล์: .item { color: black; a& { color:blue; } } ฉันจะอ้างอิงตัวเลือกประเภทก่อนตัวเลือกหลักได้อย่างไรเมื่อเป็นส่วนหนึ่งขององค์ประกอบเดียวกัน

101 sass  css-selectors 

ฉันมีงานอึกทึกที่พยายามแปลงไฟล์. scss เป็นไฟล์. css (โดยใช้ gulp-ruby-sass) จากนั้นวางไฟล์. css ที่เป็นผลลัพธ์ลงในที่เดียวกับที่พบไฟล์ต้นฉบับ ปัญหาคือเนื่องจากฉันใช้รูปแบบโกลบบิงฉันไม่จำเป็นต้องรู้ว่าไฟล์ต้นฉบับถูกเก็บไว้ที่ไหน ในโค้ดด้านล่างนี้ฉันกำลังพยายามใช้ gulp-tap เพื่อแตะเข้าไปในสตรีมและหาเส้นทางไฟล์ของไฟล์ปัจจุบันที่สตรีมอ่านจาก: gulp.task('convertSass', function() { var fileLocation = ""; gulp.src("sass/**/*.scss") .pipe(sass()) .pipe(tap(function(file,t){ fileLocation = path.dirname(file.path); console.log(fileLocation); })) .pipe(gulp.dest(fileLocation)); }); จากผลลัพธ์ของconsole.log(fileLocation)โค้ดดูเหมือนว่าโค้ดนี้จะทำงานได้ดี อย่างไรก็ตามไฟล์ CSS ที่ได้ดูเหมือนจะถูกวางไว้สูงกว่าที่ฉันคาดไว้หนึ่งไดเร็กทอรี ในที่ที่มันควรจะเป็นเส้นทางแฟ้มผลเป็นเพียงproject/sass/partialsproject/partials หากมีวิธีที่ง่ายกว่านี้ฉันจะต้องขอบคุณโซลูชันนั้นมากยิ่งขึ้น ขอบคุณ!

100 javascript  node.js  sass  gulp 

เมื่อเร็ว ๆ นี้เมื่อฉันรวบรวมไฟล์ scss ของฉันฉันได้รับข้อผิดพลาด ข้อความแสดงข้อผิดพลาดระบุว่า: รายการเบราว์เซอร์: caniuse-lite ล้าสมัย โปรดเรียกใช้คำสั่งถัดไปnpm update caniuse-lite browserslist อย่างแรกตามที่ข้อความระบุฉันใช้งานแล้วnpm update caniuse-lite browserslistแต่ไม่สามารถแก้ไขปัญหาได้ ฉันลบไดเร็กทอรี nod-module ทั้งหมดและติดตั้งอีกครั้งนอกจากนี้ฉันยังอัปเดตทั้งโฟลเดอร์โดยnpm updateแต่ไม่มีใครแก้ไขปัญหาได้ ฉันยังติดตั้ง autoprefixer และรายการเบราว์เซอร์อีกครั้ง แต่ไม่มีสิ่งใดที่ช่วยแก้ปัญหาได้ ถ้าฉันลบ "options": { "autoPrefix": "> 1%" } จากของฉันcompilerconfig.jsonทุกอย่างทำงานได้ดีซึ่งหมายความว่าอาจเกี่ยวข้องกับ autoprefixer นอกจากนี้ฉันเปลี่ยนเวอร์ชันแพ็คเกจด้วยตนเองเป็นเวอร์ชันล่าสุดpackage.jsonและติดตั้งใหม่ แต่โชคไม่ดี

99 npm  sass  autoprefixer  web-compiler 

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

96 css  sass  less  extend 

ฉันพยายามใช้การแก้ไขสตริงกับตัวแปรของฉันเพื่ออ้างอิงตัวแปรอื่น: // Set up variable and mixin $foo-baz: 20px; @mixin do-this($bar) { width: $foo-#{$bar}; } // Use mixin by passing 'baz' string as a param for use $foo-baz variable in the mixin @include do-this('baz'); แต่เมื่อฉันทำสิ่งนี้ฉันได้รับข้อผิดพลาดต่อไปนี้: ตัวแปรที่ไม่ได้กำหนด: "$ foo-" Sass รองรับตัวแปรตัวแปรสไตล์ PHP หรือไม่

95 variables  sass 

ใน Sass ฉันไม่สามารถแยกแยะความแตกต่างระหว่างการใช้@includeกับ mixin และการใช้@extendกับคลาสตัวยึดตำแหน่งได้ พวกเขาไม่เท่ากันเหรอ?

94 sass 

ใน SASS สามารถนำเข้าไฟล์จากไดเร็กทอรีอื่นได้หรือไม่? ตัวอย่างเช่นถ้าฉันมีโครงสร้างแบบนี้: - root_directory - sub_directory_a - _common.scss - template.scss - sub_directory_b - more_styles.scss template.scss สามารถนำเข้า _common.scss โดยใช้@import "common"แต่ more_styles.scss นำเข้า _common.scss ได้หรือไม่ ฉันพยายามสิ่งที่แตกต่างกันไม่กี่รวมทั้ง@import "../sub_directory_a/common"และ@import "../sub_directory_a/_common.scss"แต่ไม่มีอะไรดูเหมือนว่าจะทำงาน

93 import  sass 

ฉันกำลังดิ้นรนกับการตั้งค่า libsass เนื่องจากมันไม่ตรงไปตรงมาเหมือนกับ Transpiler ที่ใช้ Ruby ใครช่วยอธิบายวิธีการ: ติดตั้ง libsass? ใช้จากบรรทัดคำสั่ง? ใช้กับงานวิ่งอย่างอึกและฮึดฮัด? ฉันมีประสบการณ์เพียงเล็กน้อยกับผู้จัดการแพ็คเกจและแม้แต่น้อยกว่ากับนักวิ่งงาน

93 css  sass  gulp-sass  node-sass  libsass 

ฉันมีคลาสไอเท็มและคลาส "ตัวปรับแต่ง" ขนาดกะทัดรัด: .item { ... } .item.compact { /* styles to make .item smaller */ } แค่นี้ก็เรียบร้อย อย่างไรก็ตามฉันต้องการเพิ่ม@mediaคำค้นหาที่บังคับให้.itemชั้นเรียนมีขนาดกะทัดรัดเมื่อหน้าจอมีขนาดเล็กพอ ในความคิดแรกนี่คือสิ่งที่ฉันพยายามทำ: .item { ... } .item.compact { ... } @media (max-width: 600px) { .item { @extend .item.compact; } } แต่สิ่งนี้ทำให้เกิดข้อผิดพลาดต่อไปนี้: คุณไม่สามารถ @ ขยายตัวเลือกภายนอกจากภายใน @media คุณสามารถเลือก @extend ได้เฉพาะในคำสั่งเดียวกันเท่านั้น ฉันจะทำสิ่งนี้ให้สำเร็จโดยใช้ SASS โดยไม่ต้องหันไปคัดลอก / …

88 css  sass  media-queries