Google search engine

CSS SCSS तथा LESS में क्या अंतर है और इनका उपयोग

CSS SCSS तथा LESS में अंतर

आपके मन में कभी ना कभी ये सवाल आया होगा CSS, SCSS तथा LESS में अंतर क्या है किसी भी website की styling करने के लिए हम तीन तरीकों का इस्तेमाल कर सकते है पहला तरीका CSS द्वारा जिसमें हमें बहुत ज्यादा code लिखना पड़ता है तथा हमें समय भी ज्यादा लगता है. दूसरा तरीका हम SCSS द्वारा webpage की styling कर सकते है.

जिससे हम हर component जैसे – modal, button, page, variable, font तथा हर webpage की अलग-अलग file बनाकर SCSS लिख सकते है.जिससे हम आसानी से तथा काम समय में webpage design कर सकते है तीसरा तरीका हम LESS से webpage की styling कर सकते है जो सबसे सरल और तेज़ तरीका है.

LESS क्या है और उसका उपयोग – what is less and uses

वैसे भी LESS का हिंदी में meaning कम होता है यानि की काम code के द्वारा किसी website को design करना है. अगर हमें अपने website को design करना है तो सबसे पहले हमें html के साथ CSS का इस्तेमाल करना सीखना चाहिए CSS सीखने के बाद हमें SCSS और LESS को सीखना चाहिए.

LESS file भी style.css की तरह एक ही file बनती है जिसे हम style.less नाम से बनाते है तथा सारा code style.less file के अंदर लिखा जाता है. चाहे वह variable हो, page हो या button की common CSS हो. LESS file का path देने के लिए हम html में <head> tag के अंदर less file का path देते है.

<link rel="stylesheet/less" type="text/css" href="styles.less">

इसी तरह से हम html में <body> tag के अंदर <script> tag के साथ less file का JS link add करना होता है जिसके बाद हमारी less file काम करती है.

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>

LESS variables और html में LESS variables का इस्तेमाल

CSS में हम किसी प्रकार के variable का इस्तेमाल नहीं करते है तथा SCSS में हम variable.scss file बनाकर उसमें पूरे website के variable को लिखते है. variable को SCSS में $ से define किया जाता है जैसे की black color का variable देने के लिए $black:  #000; का इस्तेमाल करते है.

लेकिन less file में variable को लिखने के लिए @ का इस्तेमाल करते है. जैसे black color का variable देने के लिए @black: #000; लिखते हैं. SCSS में हम variable को variable.scss file के अंदर लिखते हैं उसी तरह less में सारे variables को एक साथ लिखा जाता हैं.

CSS SCSS तथा LESS में अंतर – difference between SCSS and LESS

अगर हम SCSS तथा LESS file को देखें तो दोनों में code लिखने का तरीका same हैं जैसे हमें CSS file में code लंबा लिखना पड़ता हैं जिसे आप CSS कैसे सीखें यहाँ से सीख सकते है लेकिन हम SCSS तथा LESS में code को same तथा short तरीके से लिखते हैं. अंतर सिर्फ variable का होता है SCSS में variable को $ तथा LESS में @ से लिखते हैं.

LESS media query और variables हिंदी में

SCSS तथा LESS में हम 2 तरीके से media query लिख सकते है. एक तो हम CSS की तरह width का size लिखकर कर सकते है दूसरा हम अलग-अलग screen size का variable बनाकर media query लिख सकते है.

और भी ज्यादा जानकारी के लिए आप CSS tricks की website से पढ़ सकते है.

LESS क्या है CSS, SCSS तथा LESS में अंतर variable और media query के बारे में जानकारी दी गयी है CSS से संबंधित किसी भी प्रकार के जानकारी के लिए नीचे अपने सवाल पूछ सकते है.

jeewan.basera@gmail.comhttps://hindischool.net
Jeewan, मै hindischool.net का foundur हूँ मै एक professional web designer और graphic designer हूँ मुझे इस क्षेत्र में 4 साल का अनुभव है और यहाँ में अपने अनुभव को blog के जरिये लोगों के साथ शेयर करता हूँ मुझे हिंदी मै blog लिखना पसंद है, graphic और website से संबंधित किसी भी प्रकार की सहायता के लिए आप social media या comment के जरिए अपने सवाल पूछ सकते है.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

21,570FansLike
3,432FollowersFollow
0SubscribersSubscribe

Latest Articles