CSS ; Uses Compass extension for implementing mixins. Uses Preboot.less extension to implement of mixins. ; Enables users to create their own ...
Skiptocontent
CoursesForWorkingProfessionalsLIVEDSALiveClassesSystemDesignJavaBackendDevelopmentFullStackLIVEExploreMoreSelf-PacedDSA-SelfPacedSDETheoryMust-DoCodingQuestionsExploreMoreForStudentsLIVECompetitiveProgrammingDataStructureswithC++DataScienceExploreMoreSelf-PacedDSA-SelfPacedCIPJAVA/Python/C++ExploreMoreSchoolCoursesSchoolGuidePythonProgrammingLearnToMakeAppsExploremoreAllCoursesTutorialsAlgorithmsAnalysisofAlgorithmsAsymptoticAnalysisWorst,AverageandBestCasesAsymptoticNotationsLittleoandlittleomeganotationsLowerandUpperBoundTheoryAnalysisofLoopsSolvingRecurrencesAmortizedAnalysisWhatdoes'SpaceComplexity'mean?Pseudo-polynomialAlgorithmsPolynomialTimeApproximationSchemeATimeComplexityQuestionSearchingAlgorithmsSortingAlgorithmsGraphAlgorithmsPatternSearchingGeometricAlgorithmsMathematicalBitwiseAlgorithmsRandomizedAlgorithmsGreedyAlgorithmsDynamicProgrammingDivideandConquerBacktrackingBranchandBoundAllAlgorithmsDataStructuresArraysLinkedListStackQueueBinaryTreeBinarySearchTreeHeapHashingGraphAdvancedDataStructureMatrixStringsAllDataStructuresInterviewCornerCompanyPreparationTopTopicsPracticeCompanyQuestionsInterviewExperiencesExperiencedInterviewsInternshipInterviewsCompetititveProgrammingDesignPatternsSystemDesignTutorialMultipleChoiceQuizzesLanguagesCC++JavaPythonC#JavaScriptjQuerySQLPHPScalaPerlGoLanguageHTMLCSSKotlinML&DataScienceMachineLearningDataScienceCSSubjectsMathematicsOperatingSystemDBMSComputerNetworksComputerOrganizationandArchitectureTheoryofComputationCompilerDesignDigitalLogicSoftwareEngineeringGATEGATEComputerScienceNotesLastMinuteNotesGATECSSolvedPapersGATECSOriginalPapersandOfficialKeysGATE2021DatesGATECS2021SyllabusImportantTopicsforGATECSWebTechnologiesHTMLCSSJavaScriptAngularJSReactJSNodeJSBootstrapjQueryPHPSoftwareDesignsSoftwareDesignPatternsSystemDesignTutorialSchoolLearningSchoolProgrammingMathematicsNumberSystemAlgebraTrigonometryStatisticsProbabilityGeometryMensurationCalculusMathsNotes(Class8-12)Class8NotesClass9NotesClass10NotesClass11NotesClass12NotesNCERTSolutionsClass8MathsSolutionClass9MathsSolutionClass10MathsSolutionClass11MathsSolutionClass12MathsSolutionRDSharmaSolutionsClass8MathsSolutionClass9MathsSolutionClass10MathsSolutionClass11MathsSolutionClass12MathsSolutionPhysicsNotes(Class8-11)Class8NotesClass9NotesClass10NotesClass11NotesChemistryNotesClass8NotesClass9NotesClass10NotesCSExams/PSUsISROISROCSOriginalPapersandOfficialKeysISROCSSolvedPapersISROCSSyllabusforScientist/EngineerExamUGCNETUGCNETCSNotesPaperIIUGCNETCSNotesPaperIIIUGCNETCSSolvedPapersStudentCampusAmbassadorProgramSchoolAmbassadorProgramProjectGeekoftheMonthCampusGeekoftheMonthPlacementCourseCompetititveProgrammingTestimonialsStudentChapterGeekontheTopInternshipCareersJobsApplyforJobsPostaJobHirewithUsKnowaboutJob-a-thonJOB-A-THONPracticeAllDSAProblemsProblemoftheDayInterviewSeries:WeeklyContestsBi-WizardCoding:SchoolContestsContestsandEventsPracticeSDESheetCuratedDSAListsTop50ArrayProblemsTop50StringProblemsTop50TreeProblemsTop50GraphProblemsTop50DPProblems
ComewritearticlesforusandgetfeaturedLearnandcodewiththebestindustryexpertsGetaccesstoad-freecontent,doubtassistanceandmore!ComeandfindyourdreamjobwithusGeeksDigestQuizzesGeeksCampusGblogArticlesIDECampusMantriHomeSavedVideosCoursesGBlogPuzzlesWhat'sNew?
ChangeLanguage
CSS-PropertiesCSS-SelectorsCSS-FunctionsCSS-ExamplesCSS-QuestionsCSS-Quiz1CSS-Quiz2CSS-Quiz3CSS-TutorialWebDevelopmentWeb-Technology
RelatedArticles
▲RelatedArticlesTop10ProjectsForBeginnersToPracticeHTMLandCSSSkillsHowtoinsertspaces/tabsintextusingHTML/CSS?CSStoputiconinsideaninputelementinaformHowtoupdateNode.jsandNPMtonextversion?HowtocreatefootertostayatthebottomofaWebpage?ResizeimageproportionallywithCSSTypesofCSS(CascadingStyleSheet)HowtopositionadivatthebottomofitscontainerusingCSS?HowtoUploadImageintoDatabaseandDisplayitusingPHP?CSS|:not(:last-child):afterSelectorHowtoselectallchildelementsrecursivelyusingCSS?MakingadivverticallyscrollableusingCSSHowtosetdivwidthtofitcontentusingCSS?Howtosetfixedwidthfor
inatable?Howtomakeelementsfloattocenter?CreateaResponsiveNavbarusingReactJSHowtomakeflexboxchildren100%heightoftheirparentusingCSS?HowtoconvertJSONstringtoarrayofJSONobjectsusingJavaScript?HowtoverticallycentertextwithCSS?HowtomakeaverticallineusingHTML?HowtoplacetextonimageusingHTMLandCSS?Howtoauto-resizeanimagetofitadivcontainerusingCSS?HowtoapplystyletoparentifithaschildwithCSS?HowtoaligncontentofadivtothebottomusingCSS?HowtogetvaluesfromhtmlinputarrayusingJavaScript?MakeadivhorizontallyscrollableusingCSSWhatisthedifferencebetweenCSSandSCSS?HowtofetchdatafromJSONfileanddisplayinHTMLtableusingjQuery?HowtoDynamicallyAdd/RemoveTableRowsusingjQuery?HowtoCreateaFormDynamicallywiththeJavaScript?TableofContentsTop10ProjectsForBeginnersToPracticeHTMLandCSSSkillsHowtoinsertspaces/tabsintextusingHTML/CSS?CSStoputiconinsideaninputelementinaformHowtoupdateNode.jsandNPMtonextversion?HowtocreatefootertostayatthebottomofaWebpage?ResizeimageproportionallywithCSSTypesofCSS(CascadingStyleSheet)HowtopositionadivatthebottomofitscontainerusingCSS?HowtoUploadImageintoDatabaseandDisplayitusingPHP?CSS|:not(:last-child):afterSelectorHowtoselectallchildelementsrecursivelyusingCSS?MakingadivverticallyscrollableusingCSSHowtosetdivwidthtofitcontentusingCSS?Howtosetfixedwidthfor |
inatable?Howtomakeelementsfloattocenter?CreateaResponsiveNavbarusingReactJSHowtomakeflexboxchildren100%heightoftheirparentusingCSS?HowtoconvertJSONstringtoarrayofJSONobjectsusingJavaScript?HowtoverticallycentertextwithCSS?HowtomakeaverticallineusingHTML?HowtoplacetextonimageusingHTMLandCSS?Howtoauto-resizeanimagetofitadivcontainerusingCSS?HowtoapplystyletoparentifithaschildwithCSS?HowtoaligncontentofadivtothebottomusingCSS?HowtogetvaluesfromhtmlinputarrayusingJavaScript?MakeadivhorizontallyscrollableusingCSSWhatisthedifferencebetweenCSSandSCSS?HowtofetchdatafromJSONfileanddisplayinHTMLtableusingjQuery?HowtoDynamicallyAdd/RemoveTableRowsusingjQuery?HowtoCreateaFormDynamicallywiththeJavaScript?WhatarethedifferencesbetweenLESSandSASS?ImproveArticle
SaveArticle
LikeArticle
LastUpdated:
25Jul,2021Thisarticleaimstoemphasizethekeyfeatures&differencesbetweenthetwoCSSpre-processors,LESSandSASS.Beforedivingdirectlyintothedifferencesection,first,let’stalkaboutthesetwopre-processors.Ifyoudon’tknowthebasicsofthispre-processor,thenpleaserefertoLESS&SASS.LESS:ItisaLeanerStyleSheetthatisdynamicinnatureandefficientlyenablescustomizationandreusability.LESSsupportscross-browserfriendly.ItisJavaScript-basedandhasverypreciseerrorreportingalongwithindicatingtheexactlocationoftheerror.Ithelpsinreadabilityandreusabilitybylettinguserscreatepropertieslikevariablesandmixinstocreatedynamicandreusablevaluesthroughouttheproject.ItusesPreboot.lesstoimplementmixins.Example:LESS@selector:box;//usingvariables .@{selector}{ font-weight:semi-bold; line-weight:20px;} CSSOutput:CSS.box{ font-weight:semi-bold; line-weight:20px;}SASS:ItisaSyntacticallyAwesomeStyleSheetthat supportsallversioncompatibleextensionstoCSSthatincreasescodereusability.ItisimplementedusingRubyandactivelyreportserrorsmadeinsyntax.Itusescompassextensiontoimplementmixinsandalsoenablesausertoimplementtheirownfunctions.Itletsuserscreatecodereusabilitieslikevariablesandmixinsaswell.Example:SASSa{ color:white; //Nesting &:hover{ text-decoration:none; } :not(&){ text-decoration:underline; }}CSSOutput:CSSa{ color:white;}a:hover{ text-decoration:none;}:not(a){ text-decoration:underline;} SimilaritiesTheyaresimilarwhenitcomestosyntax.LESS:@color:white;/*@colorisaLESSvariable*/
#header{
color:@color;
}SASS:$color:white;/*$colorisaSASSvariable*/
#header{
color:$color;
}WecanusepropertieslikemixinsandvariablesinSASSandLESSboth.DifferencesbetweenSASS&LESS:SASSLESSItisbasedonRuby,whichneedstobeinstalledinordertorunonwindows.InitiallybasedinrubybutportedtoJavaScriptnow.Onlyneedstohaveapplicablejavascriptfilesinstalledtorun.Reportserrorsmadeinsyntax.Morepreciseerrorreportingwithanindicationofthelocationoftheerror.UsesCompassextensionforimplementingmixins.UsesPreboot.lessextensiontoimplementofmixins.Enablesuserstocreatetheirownfunctions.UseJavaScripttomanipulatevalues.Use“$”forvariablesand“@”formixins.Use“@”forvariables. Example:FormixinsLESS:LESS.margined{ margin-bottom:1rem; margin-top:2rem;}#boxh1{ font:Roboto,sans-serif; .margined;}.conta{ color:blue; .margined;}CSSOutput:CSS#boxh1{ font:Roboto,sans-serif; margin-bottom:1rem; margin-top:2rem;}.conta{ color:blue; margin-bottom:1rem; margin-top:2rem;}SASS:SASS@mixinmargined{ margin-bottom:1rem; margin-top:2rem;}#boxh1{ @includemargined; font:Roboto,sans-serif;}.conta{ @includemargined; color:blue;}CSSOutput:CSS#boxh1{ margin-bottom:1rem; margin-top:2rem; font:Roboto,sans-serif;}.conta{ margin-bottom:1rem; margin-top:2rem; color:blue;}MyPersonalNotes
arrow_drop_upSave
LikePreviousHowtoplaceimageorvideoinsideSilhouette?Next
Howtousegetters/settersinTypeScript?RecommendedArticlesPage:15,Jul2015,Jul2015,Jul2019,Aug2002,Dec2107,Mar2223,Dec1928,Nov1912,Apr2211,Oct1910,Oct1910,Oct1910,Oct1918,Nov1914,Jul2017,Aug2102,Mar2004,Jun2015,Sep2026,Nov2131,Jan2013,Jul2018,Jan1927,Mar20ArticleContributedBy:dikshapatro@dikshapatroVotefordifficultyEasy
Normal
Medium
Hard
ExpertArticleTags:CSS-QuestionsPickedSASSCSSWebTechnologiesReportIssueWritingcodeincomment?
Pleaseuseide.geeksforgeeks.org,
generatelinkandsharethelinkhere.
LoadCommentsWhat'sNewViewDetailsViewDetailsViewDetailsMostpopularinCSSHowtosetspacebetweentheflexbox?FormvalidationusingjQueryDesignawebpageusingHTMLandCSSHowtodefinetwocolumnlayoutusingflexbox?SearchBarusingHTML,CSSandJavaScriptMostvisitedinWebTechnologiesInstallationofNode.jsonLinuxTop7FrameworksForBackendDevelopmentHowtogetthefirstkeynameofaJavaScriptobject?RemoveelementsfromaJavaScriptArrayHowtofetchdatafromanAPIinReactJS?ImproveyourCodingSkillswithPracticeTryIt!
Weusecookiestoensureyouhavethebestbrowsingexperienceonourwebsite.Byusingoursite,you
acknowledgethatyouhavereadandunderstoodour
CookiePolicy&
PrivacyPolicy
GotIt!
StartYourCodingJourneyNow!Login
Register |
