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

Sass (Syntactically Awesome Style Sheets) เป็นส่วนขยายของ CSS ที่เพิ่มคุณลักษณะต่างๆเช่นกฎที่ซ้อนกันตัวแปรมิกซ์อินและส่วนขยายคลาส สิ่งนี้ช่วยให้นักพัฒนาสามารถเขียน CSS ที่มีโครงสร้างจัดการได้และใช้ซ้ำได้ Sass ถูกรวบรวมเป็น CSS มาตรฐาน


11
Angular-cli จาก css เป็น scss
ฉันได้อ่านเอกสารซึ่งระบุว่าหากฉันต้องการใช้scssฉันต้องรันคำสั่งต่อไปนี้: ng set defaults.styleExt scss แต่เมื่อฉันทำและสร้างไฟล์นั้นฉันยังคงได้รับข้อผิดพลาดนี้ในคอนโซลของฉัน: styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/Egen/Code/angular/src/styles.css'(…)


2
Sass และตัวเลือกเด็กรวม
ฉันเพิ่งค้นพบ Sass และฉันก็ตื่นเต้นกับมันมาก ในเว็บไซต์ของฉันฉันใช้เมนูการนำทางที่เหมือนต้นไม้ซึ่งมีสไตล์โดยใช้ลูก combinator ( E > F) มีวิธีใดในการเขียนโค้ดนี้ใหม่ด้วยไวยากรณ์ที่ง่ายกว่า (หรือดีกว่า) ใน Sass หรือไม่? #foo > ul > li > ul > li > a { color: red; }
126 css  css-selectors  sass 

5
CSS และ SCSS แตกต่างกันอย่างไร
ฉันรู้จัก CSS เป็นอย่างดี แต่สับสนเกี่ยวกับ Sass SCSS แตกต่างจาก CSS อย่างไรและถ้าฉันใช้ SCSS แทน CSS จะทำงานเหมือนกันหรือไม่
124 css  sass 

5
มีตัวแปรในเส้นทางรูปภาพใน Sass หรือไม่?
ฉันต้องการมีตัวแปรหนึ่งตัวที่มีรูทพา ธ ไปยังรูปภาพทั้งหมดของฉันในไฟล์ CSS ฉันไม่สามารถเข้าใจได้ว่าสิ่งนี้เป็นไปได้หรือไม่ใน Pure Sass (โครงการเว็บจริงไม่ใช่ RoR ดังนั้นจึงไม่สามารถใช้ asset_pipeline หรือแจ๊สแฟนซีใด ๆ ได้) นี่คือตัวอย่างของฉันที่ไม่ได้ผล ในการคอมไพล์มันขัดขวางที่ตัวอย่างแรกของตัวแปรในคุณสมบัติ url พื้นหลังพูดว่า ( "Invalid CSS after "..site/background": expected ")") การกำหนดฟังก์ชันเพื่อส่งกลับเส้นทาง: //Vars $assetPath : "/assets/images"; //Functions @function get-path-to-assets($assetPath){ @return $assetPath; } การใช้ฟังก์ชัน: body { margin: 0 auto; background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0; width: 100%; …
123 css  sass 

6
ตัวยึด Mixin SCSS / CSS
ฉันกำลังพยายามสร้าง mixin สำหรับตัวยึดตำแหน่งใน sass นี่คือมิกซ์อินที่ฉันสร้างขึ้น @mixin placeholder ($css) { ::-webkit-input-placeholder {$css} :-moz-placeholder {$css} ::-moz-placeholder {$css} :-ms-input-placeholder {$css} } นี่คือวิธีที่ฉันต้องการรวมมิกซ์อิน: @include placeholder(font-style:italic; color: white; font-weight:100;); เห็นได้ชัดว่าสิ่งนี้จะไม่ได้ผลเพราะเครื่องหมายทวิภาคและเซมิโคลอนทั้งหมดที่ส่งผ่านไปยังมิกซ์อิน แต่ ... ฉันต้องการแค่ใส่ static css แล้วส่งผ่านเหมือนกับฟังก์ชันข้างต้น เป็นไปได้หรือไม่
122 css  sass 

2
ตัวเลือกพรีโปรเซสเซอร์ Vue CLI CSS: dart-sass VS node-sass?
เมื่อสร้างโครงการใหม่ด้วย CLI (v3.7.0) มีตัวเลือกให้เลือกระหว่างdart-sassหรือnode-sassคอมไพเลอร์ เหล่านี้จะเปรียบเทียบวิธีการแต่ละอื่น ๆ ที่จะเฉพาะเจาะจงมากขึ้นกว่าที่ประกาศไว้ในเอกสาร Vue ? เคล็ดลับเกี่ยวกับประสิทธิภาพของ Sass โปรดทราบว่าเมื่อใช้ Dart Sass การคอมไพล์แบบซิงโครนัสจะเร็วกว่าการคอมไพล์แบบอะซิงโครนัสเป็นสองเท่าโดยค่าเริ่มต้นเนื่องจากค่าใช้จ่ายของการเรียกกลับแบบอะซิงโครนัส เพื่อหลีกเลี่ยงค่าใช้จ่ายนี้คุณสามารถใช้แพ็คเกจ fibre เพื่อเรียกผู้นำเข้าแบบอะซิงโครนัสจากเส้นทางรหัสซิงโครนัส ในการเปิดใช้งานสิ่งนี้เพียงแค่ติดตั้งเส้นใยเป็นการพึ่งพาโครงการ: npm install -D fibers โปรดทราบด้วยว่าเป็นโมดูลดั้งเดิมอาจมีปัญหาความเข้ากันได้ที่แตกต่างกันไปตามระบบปฏิบัติการและสภาพแวดล้อมการสร้าง ในกรณีนี้โปรดเรียกใช้npm uninstall -D fibersเพื่อแก้ไขปัญหา ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS …

3
คำนวณเปอร์เซ็นต์ด้วย SCSS / SASS
ฉันต้องการกำหนดความกว้างเป็นเปอร์เซ็นต์ใน scss ผ่านการคำนวณ แต่มันทำให้ฉันมีข้อผิดพลาด .. CSS ไม่ถูกต้องหลัง "...- width: (4/12)%": นิพจน์ที่คาดหวัง (เช่น 1px ตัวหนา) คือ ";" ฉันต้องการทำสิ่งที่ชอบ $my_width: (4/12)%; div{ width: $my_width; } ฉันจะเพิ่ม% sign in ที่นั่นได้อย่างไร คำถามเดียวกันกับ px และ em
121 css  sass 

7
การใช้ตัวแปร Sass กับ CSS3 Media Queries
ฉันกำลังพยายามรวมการใช้ตัวแปร Sass กับคำสั่ง @media ดังนี้: $base_width:1160px; @media screen and (max-width: 1170px) {$base_width: 960px;} @media screen and (min-width: 1171px) {$base_width: 1160px;} $base_width จากนั้นกำหนดไว้ที่จุดต่างๆในการวัดเปอร์เซ็นต์ตามความกว้างของสไตล์ชีตเพื่อสร้างเค้าโครงของไหล เมื่อฉันทำสิ่งนี้ดูเหมือนว่าตัวแปรจะได้รับการยอมรับอย่างถูกต้อง แต่เงื่อนไขสำหรับแบบสอบถามสื่อไม่ได้รับ ตัวอย่างเช่นโค้ดด้านบนจะสร้างเค้าโครง 1160px โดยไม่คำนึงถึงความกว้างของหน้าจอ ถ้าฉันพลิกคำสั่ง @media ดังนี้: @media screen and (min-width: 1171px) {$base_width: 1160px;} @media screen and (max-width: 1170px) {$base_width: 960px;} สร้างเค้าโครง 960px อีกครั้งโดยไม่คำนึงถึงความกว้างของหน้าจอ โปรดทราบว่าหากฉันลบบรรทัดแรก$base_width: 1160px;จะส่งกลับข้อผิดพลาดสำหรับตัวแปรที่ไม่ได้กำหนด มีความคิดอะไรที่ฉันขาดหายไป?

18
Node Sass ยังไม่รองรับสภาพแวดล้อมปัจจุบันของคุณ: Linux 64 บิตพร้อมเท็จ
รับข้อผิดพลาดนี้บน Arch Linux ด้วย node-sass ฉันใช้มันกับอึก -ซาส Node Sass does not yet support your current environment: Linux 64-bit with false รุ่น $ gulp -v [19:43:15] CLI version 3.9.1 [19:43:15] Local version 3.9.1 $ npm -v 3.9.0 ปม $ node -v v6.2.0 แม้แต่การใช้คำสั่งนี้npm rebuild node-sassก็ไม่ได้เปลี่ยนแปลงอะไร

8
วิธีแก้ปัญหา“ คุณต้องติดตั้ง Ruby และ Sass และอยู่ใน PATH เพื่อให้งานนี้ทำงานได้” คำเตือน?
ฉันอยู่ระหว่างการตั้งค่า Mac เครื่องใหม่สำหรับการทำงาน ฉันได้ติดตั้ง Grunt & Grunt CLI ทั่วโลกแล้ว จากนั้นฉันก็npm installเข้าไปในโฟลเดอร์โครงการเพื่อติดตั้งการอ้างอิงทั้งหมด ยังไม่มีปัญหา แต่ทันทีที่ฉันพยายามเรียกใช้sass:distงานฉันได้รับคำเตือนนี้: Warning: You need to have Ruby and Sass installed and in your PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-sass Use --force to continue. สิ่งที่ฉันเข้าใจคือฉันต้องติดตั้ง Ruby และ Sass ในระดับสากลมากขึ้นเพื่อให้งานนี้ทำงานได้ เนื่องจากฉันยังค่อนข้างใหม่ในการทำงานกับเทอร์มินัลฉันจึงทำการค้นหาอย่างรวดเร็วเพื่อค้นหาว่าPATHคืออะไร- ดูเหมือนว่าเส้นทางของระบบบางส่วน (ที่สามารถเปลี่ยนแปลงได้) ซึ่งมีการจัดเก็บข้อมูลสำคัญ นี่หมายความว่าฉันสามารถsudo grunt install …
117 ruby  macos  bash  terminal  sass 

8
เปลี่ยนสีข้อความตามความสว่างของพื้นที่พื้นหลังที่ปกคลุม?
ฉันคิดเกี่ยวกับสิ่งต่อไปนี้มาระยะหนึ่งแล้วดังนั้นตอนนี้ฉันต้องการทราบความคิดเห็นของคุณวิธีแก้ปัญหาที่เป็นไปได้และอื่น ๆ ฉันกำลังมองหาปลั๊กอินหรือเทคนิคที่เปลี่ยนสีของข้อความหรือสลับระหว่างรูปภาพ / ไอคอนที่กำหนดไว้ล่วงหน้าขึ้นอยู่กับความสว่างเฉลี่ยของพิกเซลที่ครอบคลุมของภาพพื้นหลังหรือสีของผู้ปกครอง หากพื้นที่ปกคลุมของพื้นหลังค่อนข้างมืดให้ทำให้ข้อความเป็นสีขาวหรือเปลี่ยนไอคอน นอกจากนี้จะเป็นการดีมากหากสคริปต์จะสังเกตเห็นว่าพาเรนต์ไม่มีการกำหนดสีพื้นหลังหรือ - รูปภาพจากนั้นจึงค้นหาสิ่งที่ใกล้ที่สุดต่อไป (จากองค์ประกอบหลักถึงองค์ประกอบหลัก .. ) คุณคิดอย่างไรรู้เกี่ยวกับแนวคิดนี้หรือไม่? มีบางอย่างที่คล้ายกันอยู่แล้วหรือไม่? สคริปต์ตัวอย่าง? ไชโยเจ.
114 javascript  jquery  html  css  sass 

7
มี SASS.js หรือไม่? บางอย่างเช่น LESS.js?
ฉันเคยใช้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 

3
จะรวมการประมวลผลล่วงหน้า CSS ภายใน Eclipse ได้อย่างไร? [ปิด]
ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน5 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันต้องการแก้ไขไฟล์ SCSS ใน Eclipse โดยเฉพาะด้วยการเน้นไวยากรณ์สำหรับ.scssไฟล์ ฉันพบว่าทรัพยากรเหล่านี้มีค่า: http://sass-lang.com/editors.html - ไม่มีตัวแก้ไขสำหรับไฟล์. scss เท่านั้น. sass http://colorer.sourceforge.net/eclipsecolorer - มีเฉพาะไฟล์. scss ฉันจะรวมการพัฒนา SCSS ภายใน Eclipse editor ได้อย่างไร หรือโดยทั่วไปแล้วฉันจะรวม CSS pre-processor เข้ากับ Eclipse ได้อย่างไร

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.