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

จากสิ่งที่ฉันได้อ่าน Sass เป็นภาษาที่ทำให้ CSS มีประสิทธิภาพมากขึ้นด้วยการสนับสนุนตัวแปรและคณิตศาสตร์ ความแตกต่างกับ SCSS คืออะไร? มันควรจะเป็นภาษาเดียวกันหรือไม่? ที่คล้ายกัน? แตกต่างกันอย่างไร

1900 css  sass 

ฉันพยายามใช้calc()ฟังก์ชันในสไตล์ชีต Sass แต่ฉันมีปัญหา นี่คือรหัสของฉัน: $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) ถ้าฉันใช้ตัวอักษร50pxแทนที่จะเป็นbody_paddingตัวแปรฉันจะได้สิ่งที่ต้องการ อย่างไรก็ตามเมื่อฉันเปลี่ยนเป็นตัวแปรนี่คือผลลัพธ์: body { padding-top: 50px; height: calc(100% - $body_padding); } ฉันจะทำให้ Sass รับรู้ได้อย่างไรว่ามันจำเป็นต้องเปลี่ยนตัวแปรภายในcalcฟังก์ชั่น?

1345 css  sass  css-calc 

อย่างไรก็ตามมีการนำเข้าไฟล์ CSS ปกติด้วย@importคำสั่งของ Sass หรือไม่? ในขณะที่ฉันไม่ได้ใช้ไวยากรณ์ SCSS ทั้งหมดจาก sass ฉันยังคงสนุกกับการรวม / บีบอัดคุณสมบัติและต้องการใช้โดยไม่ต้องเปลี่ยนชื่อไฟล์ทั้งหมดเป็น * .scss

509 css  sass 

ฉันได้ติดตั้งโมดูลโหนดโดยการติดตั้ง NPM แล้วฉันพยายามที่จะเขมือบ sass-watch ในพรอมต์คำสั่ง หลังจากนั้นฉันก็ได้รับคำตอบด้านล่าง [18:18:32] Requiring external module babel-register fs.js:27 const { Math, Object, Reflect } = primordials; ^ ReferenceError: primordials is not defined ลองทำสิ่งนี้ก่อนที่จะเขมือบชม npm -g install gulp-cli

364 node.js  sass  gulp  gulp-sass 

ฉันได้รับการกำหนดค่าแบบอักษรบางอย่างในไฟล์ Scss ของฉันดังนี้: @font-face { font-family: 'Icomoon'; src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'), asset-url('icoMoon.woff', font) format('woff'), asset-url('icoMoon.ttf', font) format('truetype'), asset-url('icoMoon.svg#Icomoon', font) format('svg'); } ไฟล์ตัวอักษรที่แท้จริงจะถูกเก็บไว้ใน / app / สินทรัพย์ / แบบอักษร / ฉันเพิ่มลงconfig.assets.paths << Rails.root.join("app", "assets", "fonts")ในไฟล์ application.rb แล้ว และคอมไพล์ซอร์ส CSS มีดังต่อไปนี้: @font-face { font-family: 'Icomoon'; src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), …

345 ruby-on-rails  sass  asset-pipeline  font-face  assets 

ฉันใช้ Sass (.scss) สำหรับโครงการปัจจุบันของฉัน ตัวอย่างต่อไปนี้: HTML <div class="container desc"> <div class="hello"> Hello World </div> </div> SCSS .container { background:red; color:white; .hello { padding-left:50px; } } มันใช้งานได้ดี ฉันสามารถจัดการหลายคลาสในขณะที่ใช้สไตล์ที่ซ้อนกันได้หรือไม่ ในตัวอย่างข้างต้นฉันพูดถึงเรื่องนี้: CSS .container.desc { background:blue; } ในกรณีนี้div.containerปกติจะเป็นredแต่div.container.descจะเป็นสีน้ำเงิน ฉันจะวางสิ่งนี้ไว้ข้างในcontainerด้วย Sass ได้อย่างไร

332 sass 

ฉันใหม่กับ Angular และฉันมาจากชุมชน Ember กำลังพยายามใช้ Angular-CLI ใหม่ซึ่งอ้างอิงจาก Ember-CLI ฉันจำเป็นต้องรู้วิธีที่ดีที่สุดในการจัดการ SASS ในโครงการ Angular ใหม่ ฉันลองใช้ember-cli-sassrepo เพื่อดูว่ามันจะเล่นได้หรือไม่เนื่องจากส่วนประกอบหลักจำนวนมากของ Angular-CLI นั้นไม่ทำงานในโมดูล Ember-CLI มันใช้งานไม่ได้ แต่ก็ไม่แน่ใจอีกต่อไปหากฉันเพิ่งกำหนดค่าบางอย่างผิดพลาด นอกจากนี้วิธีที่ดีที่สุดในการจัดระเบียบสไตล์ในโครงการแองกูลาร์ใหม่คืออะไร มันจะดีถ้ามีไฟล์ sass ในโฟลเดอร์เดียวกับคอมโพเนนต์

329 angular  sass  angular-cli 

ฉันมีสิ่งนี้ในไฟล์ SCSS ของฉัน: .class-a{ display: inline-block; //some other properties &:hover{ color: darken(#FFFFFF, 10%); } } .class-b{ //Inherite class-a here //some properties } ในชั้น B, ผมอยากจะ inherite class-aคุณสมบัติและการประกาศที่ซ้อนกันของ สิ่งนี้ทำได้อย่างไร ฉันพยายามใช้@include class-aแต่นั่นก็แค่เกิดข้อผิดพลาดเมื่อรวบรวม

309 inheritance  sass 

ฉันต้องการใช้ชุดเริ่มต้นของเว็บ google ผมติดตั้ง v0.12.0 node-sassNode.js, gulpและ จากนั้นจึงวิ่ง: $ sudo npm install เมื่อฉันพิมพ์gulp serveแล้วมีข้อผิดพลาดนี้: Using gulpfile ~/web-starter-kit/gulpfile.js Starting 'styles'... 'styles' errored after 93 ms Error: `libsass` bindings not found. Try reinstalling `node-sass`? at getBinding ฉันติดตั้งใหม่โหนดและอึก แต่มันไม่ได้ช่วย ฉันควรทำอย่างไรต่อไป

263 node.js  sass  gulp 

มีวิธีการทำงานหรือไม่: sass --watch a.scss:a.css แต่a.cssท้ายที่สุดก็ถูกย่อให้เล็กลง? ฉันจะหลีกเลี่ยงการเรียกใช้ขั้นตอนการลดขนาดแยกต่างหากเมื่อฉันรวบรวมสไตล์ชีทของฉันได้อย่างไร

235 css  sass  minify 

ฉันต้องการเก็บไฟล์. scss ส่วนกลางหนึ่งไฟล์ที่เก็บคำจำกัดความตัวแปร SASS ทั้งหมดสำหรับโครงการ // _master.scss $accent: #6D87A7; $error: #811702; $warning: #F9E055; $valid: #038144; // etc... โปรเจ็กต์จะมีไฟล์ CSS จำนวนมากเนื่องจากลักษณะของมัน เป็นสิ่งสำคัญที่ฉันต้องประกาศตัวแปรสไตล์โครงการทั้งหมดในที่เดียว มีวิธีการทำเช่นนี้ใน SCSS หรือไม่?

217 css  sass 

ฉันมี Sass mixin ต่อไปนี้ซึ่งเป็นการปรับเปลี่ยนครึ่งหนึ่งของตัวอย่าง RGBaอย่างสมบูรณ์: @mixin background-opacity($color, $opacity: .3) { background: rgb(200, 54, 54); /* The Fallback */ background: rgba(200, 54, 54, $opacity); } ฉันสมัคร$opacityแล้ว แต่ตอนนี้ฉันติดอยู่กับ$colorส่วนแล้ว สีที่ฉันจะส่งเข้ามาใน mixin นั้นจะเป็น HEX ไม่ใช่ RGB ตัวอย่างการใช้ของฉันจะเป็น: element { @include background-opacity(#333, .5); } ฉันจะใช้ค่า HEX ภายในมิกซ์อินนี้ได้อย่างไร

213 css  sass  background-color  mixins  rgba 

ฉันกำลังทำให้สไตล์ชีทของฉันเป็นแบบแยกส่วนด้วย SASS partials ดังนี้: @import partials/header @import partials/viewport @import partials/footer @import partials/forms @import partials/list_container @import partials/info_container @import partials/notifications @import partials/queues มีวิธีรวมไดเรกทอรี partials ทั้งหมด (เป็นไดเรกทอรีที่เต็มไปด้วย SASS-partials) เช่น @import compass หรืออะไร?

209 import  sass  partials 

ฉันกำลังเขียนมิกซ์อินอย่างนี้: @mixin box-shadow($top, $left, $blur, $color, $inset:"") { -webkit-box-shadow: $top $left $blur $color $inset; -moz-box-shadow: $top $left $blur $color $inset; box-shadow: $top $left $blur $color $inset; } เมื่อเรียกสิ่งที่ฉันต้องการจริงๆก็คือถ้าไม่มีการส่ง$insetค่าใด ๆจะไม่มีสิ่งใดส่งออกแทนที่จะรวบรวมสิ่งนี้: -webkit-box-shadow: 2px 2px 5px #555555 ""; -moz-box-shadow: 2px 2px 5px #555555 ""; box-shadow: 2px 2px 5px #555555 ""; ฉันจะเขียนมิกซ์อินใหม่เพื่อที่ว่าถ้าไม่มีค่าของการ$insetส่งผ่านจะไม่มีอะไรออก

201 sass 

ฉันต้องการเริ่มใช้เข็มทิศและเขื่องเพื่อเร่งการพัฒนา ในตอนนี้ฉันได้ติดตั้ง Sass บน mac และสั่งให้ดูไฟล์ scss สำหรับอินพุตและไฟล์ css สำหรับเอาต์พุตที่สร้างขึ้น จากหลาย ๆ บทความ Sass ถูกใช้กับ Compass ฉันสงสัยว่าทำไมถึงเป็นเช่นนั้นและ Compass เพิ่มอะไรให้ Sass มาโดยปราศจากอะไร หากคุณสามารถยกตัวอย่างให้ดีขึ้น ขอบคุณ

166 css  sass  compass-sass