มี SASS.js หรือไม่? บางอย่างเช่น LESS.js?

112

ฉันเคยใช้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: { ... }, mixins: { ... }}

css sass less

— จิ๋วเหม่ง
แหล่งที่มา

6

sass watchสำหรับการผลิตมันเป็นรากของความชั่วร้ายในการพัฒนาคุณมี

— Hauleth

3

ฉันชอบแนวคิดนี้ตั้งแต่ปัญหาเกี่ยวกับ "นาฬิกา sass" คือบางครั้งคุณทดสอบหน้านี้โดยบังเอิญก่อนที่ "นาฬิกา sass" จะเริ่มทำงาน ด้วย less.js คุณสามารถโหลดเพจได้และต้องแน่ใจว่า css ถูกคอมไพล์แล้วเมื่อคุณเห็นเพจ แน่นอนเฉพาะในสภาพแวดล้อมการพัฒนาเท่านั้น

— Maya Kathrine Andersen

ตรวจสอบ SassMeister: sassmeister.com - คอมไพเลอร์ SASS ออนไลน์ฟรี

— Dan

1

มีแน่นอนsass.js

— LukyVj

นาฬิกา @Hauleth sass (เช่นนาฬิกาน้อยกว่า) บางครั้งไม่ใช่ตัวเลือก โดยเฉพาะอย่างยิ่งเมื่อไฟล์ต้นฉบับของคุณได้รับการจัดการโดยการสร้าง / การอ้างอิงของบุคคลที่สามและคุณจะมีไฟล์ต้นฉบับแบบเต็มได้ก็ต่อเมื่อคุณบรรจุหรือปรับใช้เว็บแอปของคุณและปรับใช้งานได้ช้า (เช่น ... เว็บแอป java)

— Zardoz89

42

ไม่มีการนำ JavaScript มาใช้อย่างเป็นทางการของ sass หรือ scss มีการใช้งานสองสามอย่างที่ฉันเห็นอยู่ แต่ไม่มีอะไรที่ฉันสามารถแนะนำให้ใช้ในตอนนี้

อย่างไรก็ตามโปรดบางประเด็น:

เหตุใดคุณจึงควรให้ผู้ใช้ทุกคนรวบรวมสไตล์ชีตของคุณเมื่อคุณสามารถทำได้เพียงครั้งเดียวสำหรับพวกเขาทั้งหมด
ไซต์ของคุณจะเป็นอย่างไรหากปิดใช้งาน JavaScript
หากคุณตัดสินใจที่จะเปลี่ยนเป็นการใช้งานฝั่งเซิร์ฟเวอร์ในอนาคตเทมเพลตทั้งหมดของคุณจะต้องเปลี่ยนตามนั้น

ดังนั้นในขณะที่ต้องเริ่มการตั้งค่าอีกเล็กน้อยเรา (ทีม sass core) คิดว่าการคอมไพล์ฝั่งเซิร์ฟเวอร์เป็นแนวทางในระยะยาวที่ดีที่สุด ในทำนองเดียวกันนักพัฒนาจำนวนน้อยชอบการคอมไพล์ฝั่งเซิร์ฟเวอร์สำหรับสไตล์ชีตการผลิต

— chriseppstein
แหล่งที่มา

157

กรณีการใช้งานของฉัน: การพัฒนาเทมเพลต html + css ซึ่งจะใส่ลงในโครงการราง คงจะดีไม่น้อยหากมี sass.js เพื่อวัตถุประสงค์ในการพัฒนา localhost เพื่อที่ฉันจะได้ไม่ต้องวุ่นวายกับเซิร์ฟเวอร์

— Josef Richter

93

มีหลายกรณีที่การคอมไพล์ฝั่งไคลเอ็นต์มีประโยชน์ ตัวอย่างเช่นหากคุณต้องการให้ผู้ใช้เล่นกับหน้าตาของเพจและบันทึกเฉพาะผลลัพธ์ที่เลือกกลับไปที่เซิร์ฟเวอร์

— montrealmike

26

ฉันเห็นด้วย 100% กับ chriseppstein (ทำไมคุณถึงต้องการให้ผู้ใช้รวบรวมสไตล์ชีต) ไม่ได้กล่าวถึงที่นี่ธรรมดาและเรียบง่าย: การพัฒนา โค้ด js ที่ปรับใช้ทั้งหมดของฉันฉันต้องการลดขนาดและบีบอัดเช่นเดียวกับ css ของฉัน แต่ในระหว่างการพัฒนาจะช่วยให้สามารถเข้าถึงโค้ดได้มากกว่าเวอร์ชัน "คอมไพล์" ฉันไม่แน่ใจว่าฉันพูดแทนวิศวกรส่วนหน้าทั้งหมด แต่ฉันสามารถพูดได้ว่าพวกเราหลายคนใช้เบราว์เซอร์และเครื่องมือแก้ไขของเราเป็นเครื่องมือเดียวที่จำเป็นในระหว่างขั้นตอนการพัฒนา ฉันไม่ต้องการที่จะต้อง "รวบรวม" sass / scss ในระหว่างการพัฒนา Deployment / CI / Production เป็นคนละเรื่องกัน

— Graza

15

การโยนอะไรบางอย่างในฝั่งผู้เขียน ฉันต้องการพิจารณาใช้ SASS แต่ฉันไม่ได้ใช้หรือไม่ต้องการใช้ Ruby ดังนั้นโซลูชันฝั่งไคลเอ็นต์จึงเป็นที่ต้องการมากกว่าไม่มี การเขียนใน Ruby จำกัด การใช้งานเฉพาะผู้ใช้ Ruby เท่านั้น ถ้ามันเขียนด้วย JS มันสามารถใช้กับไคลเอนต์หรือบนเซิร์ฟเวอร์ (กับ node, classic asp, asp.net และอื่น ๆ )

— แดน

27

การใช้งาน JavaScript สามารถใช้ฝั่งเซิร์ฟเวอร์ที่มีโหนด / แรด ฯลฯ ได้โดยไม่ต้องพึ่งพาทับทิม

— Sam Hasler

29

เนื่องจาก visionmeda / sass.js ไม่สามารถใช้งานได้อีกต่อไปและ scss-js ยังไม่ได้รับการอัปเดตใน 2 ปีฉันอาจสนใจคุณ sass.js มันคือไลบรารี C ++ libsass (ซึ่งใช้โดยnode-sass ) ที่คอมไพล์เป็น JavaScript โดยใช้ Emscripten การดำเนินการที่จะ stylesheets SCSS รวบรวมที่เชื่อมโยงหรือ inlined ใน html สามารถพบได้ที่sass.link.js

ลองใช้ sass.js โดยใช้ไฟล์ สนามเด็กเล่นแบบโต้ตอบ

— rodneyrehm
แหล่งที่มา

3

ตอนนี้เราต้องการคอมไพเลอร์ C ++ ถึง Ruby และเราสามารถรวม codebase ได้

— joeytwiddle

1

sass.js ดูเหมือนจะมีขนาดใหญ่มากในขนาด 670KB (gzipped) เมื่อเทียบกับขนาด less.js 143kb (gzipped) ฉันไม่เห็นตัวเลือกใด ๆ ใน sass.js เพื่อตั้งค่าตัวแปร css แบบไดนามิกเทียบกับ less.js สิ่งนี้มีประโยชน์มากเมื่อคุณมีไซต์ที่น่าเชื่อถือ

— Anirudha

7

ใช่

ตามที่เราคาดหวังไว้หลังจากเขียนใหม่ในC ++แล้วคุณสามารถรวบรวมใน Javascript ผ่านEmscriptenได้

นี่คือเวอร์ชันเบราว์เซอร์: https://github.com/medialize/sass.js/

ตามที่แนะนำสำหรับโหนดคุณสามารถใช้อันนี้: https://github.com/sass/node-sass

— Nikoloza
แหล่งที่มา

2

การรวมกันของคำตอบนี้และคำตอบ (ที่ยอมรับในปัจจุบัน) ควรเป็นคำตอบที่ยอมรับได้จริง

— plaidcorp

6

ฉันเพิ่งค้นพบ Sass.js Playground ที่น่าสนใจ บางสิ่งอาจมีการเปลี่ยนแปลงในช่วงหลายปีที่ผ่านมา ลองดู:

http://medialize.github.io/playground.sass.js/

— ช่องลิปพัง
แหล่งที่มา

5

คุณไม่ควรทำให้ผู้ใช้ทั้งหมดของคุณรวบรวมสไตล์ชีทอย่างแน่นอนอย่างไรก็ตามการใช้งานจาวาสคริปต์สามารถทำงานบนเซิร์ฟเวอร์ได้เช่นกัน ฉันกำลังมองหาการใช้งาน javascript sass - เพื่อใช้ในแอป node.js นี่คือสิ่งที่ทีมงาน sass กำลังพิจารณาอยู่หรือไม่?

— Tilleryj
แหล่งที่มา

3

ฉันไม่ต้องการใช้ SASS.js ในการผลิต! ฉันต้องการที่จะปรับใช้เครื่องที่กำลังพัฒนาโดยไม่จำเป็นต้องติดตั้ง Ruby สำหรับ SASS เท่านั้น เมื่อการพัฒนาเสร็จสิ้นฉันสามารถประมวลผล SASS บนเครื่องใดก็ได้และย้าย CSS ผลลัพธ์ไปยังเซิร์ฟเวอร์ที่ใช้งานจริง

— A. Matías Quezada

1

ฉันขอแนะนำให้คุณดูการใช้ Stylus แทน sass ในโครงการ Node

— airtonix

3

มีความพยายามในการเป็นGitHub , SCSS-js อย่างไรก็ตามมันยังไม่สมบูรณ์และไม่มีการกระทำใด ๆ ในห้าเดือน

— ปีเตอร์ลียง
แหล่งที่มา

1

ดูเหมือนว่าโมดูลโหนด js? คำถามเดิมคือการใช้งานฝั่งไคลเอ็นต์การแข่งขันไม่ใช่หรือ

— jayarjo

1

ทำไมต้อง LibSass

ในขณะที่มีอยู่ในทำนองคลองธรรมไม่เป็นทางการ JavaScript การดำเนินงานของเขื่องมี C พอร์ตอย่างเป็นทางการ / C ++ ของเครื่องยนต์ Sass ที่รู้จักในฐานะLibSass เนื่องจาก LibSass เป็นการใช้งานอย่างเป็นทางการจึงควรเลือกใช้ไลบรารี JavaScript ที่ใช้ LibSass ภายใต้ประทุน

บนเซิร์ฟเวอร์

สำหรับการเรียกใช้งาน JavaScript ในสภาพแวดล้อมที่ Node.js มีNode-เขื่อง

ภายใต้ประทุน Node-sass ใช้ LibSass เอง

ในเบราว์เซอร์

สำหรับการเรียกใช้งาน JavaScript ในเบราว์เซอร์มีSass.js

ภายใต้ประทุน, Sass.js ใช้รุ่นของ LibSass A (v3.3.6 ที่จุดของการเขียนนี้ฉัน) ที่ได้รับการแปลงเป็น JavaScript กับEmscripten

— จอห์น Slegers
แหล่งที่มา