<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>CSS &#8211; Invenza Solutions</title>
	<atom:link href="https://www.invenza.in/css/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.invenza.in</link>
	<description>IMAGINATION. INSPIRATION. INNOVATION.</description>
	<lastBuildDate>Thu, 09 May 2024 10:12:55 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.7.14</generator>

<image>
	<url>https://www.invenza.in/wp-content/uploads/2020/09/favi.png</url>
	<title>CSS &#8211; Invenza Solutions</title>
	<link>https://www.invenza.in</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Switch to SASS</title>
		<link>https://www.invenza.in/switch-to-sass/</link>
		
		<dc:creator><![CDATA[Rinu Pal]]></dc:creator>
		<pubDate>Thu, 26 Nov 2020 10:51:53 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<guid isPermaLink="false">https://www.invenza.in/?p=22176</guid>

					<description><![CDATA[<p>The post <a rel="nofollow" href="https://www.invenza.in/switch-to-sass/">Switch to SASS</a> appeared first on <a rel="nofollow" href="https://www.invenza.in">Invenza Solutions</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div id="topic1" class="vc_row wpb_row vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_text_column wpb_content_element " >
		<div class="wpb_wrapper">
			<h2><strong>Use:</strong></h2>
<p>SASS is more powerful and stable that provides power to the basic language by using extension of CSS. You can use SASS in three different ways −</p>
<p>1.As a command line tool<br />
2.As a Ruby module<br />
3.As a plugin for Rack enable framework</p>
<p>Using a CSS preprocessor like Sass (Syntactically awesome style sheets) effectively will help modularize your CSS code making it more maintainable, understandable and reusable. Sass consists of two syntaxes, the original syntax called “the indented syntax” and the newer “SCSS”.</p>
<h4>How Does SASS Work?</h4>
<p style="text-align: justify;">A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS.<br />
This process is called transpiling. So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.</p>
<h3>Mixins and control directives:</h3>
<p>Mixins allow creating a group of styles, which are reusable throughout your stylesheet without any need to recreation of non-semantic classes. In CSS, the mixins can store multiple values or parameters and call function; it helps to avoid writing repetitive codes. Mixin names can use underscores and hyphens interchangeably.</p>
<p>Styling based on some conditions or applying the same style many times with variations can be accomplished by using control directives and expressions, which are supported by SassScript. These control directives are advanced options used mainly in mixins. They require considerable flexibility, as they are a part of Compass libraries.</p>
<h4>Advantages of SASS:</h4>
<p>-It allows writing clean CSS in a programming construct.<br />
-It helps in writing CSS quickly.<br />
-It is a superset of CSS, which helps designers and developers work more efficiently and quickly.<br />
-As Sass is compatible with all versions of CSS, we can use any available CSS libraries.<br />
-It is possible to use nested syntax and useful functions such as color manipulation, mathematics and other values.</p>
<h4>Disadvantages of SASS:</h4>
<p>-It takes time for a developer to learn new features present in this pre-processor.<br />
-If many people are working on the same site, then should use the same preprocessor. Some people use Sass and some people use CSS to edit the files directly. Therefore, it becomes difficult to work on the site.<br />
-There are chances of losing benefits of browser&#8217;s built-in element inspector.</p>
<h4>Conclusion:</h4>
<p>SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes the style of document structurally.</p>

		</div>
	</div>
</div></div></div></div><div class="vc_row wpb_row vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_text_column wpb_content_element " >
		<div class="wpb_wrapper">
			<h3>Conclusion</h3>
<p>Join my weekly Newsletter and subscribe to my weekly podcast, In the Arena.</p>

		</div>
	</div>
</div></div></div></div><div class="vc_row wpb_row vc_row-fluid conclusion-bg vc_custom_1597814140699 vc_row-has-fill"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_text_column wpb_content_element " >
		<div class="wpb_wrapper">
			<p style="text-align: center;">Thanks for reading<br />
Share via social media</p>

		</div>
	</div>
<div class="ohio-socialbar-sc socialbar  text-center outline social-column-3 shadow default" 
	id="ohio-custom-69741b215c620" 
	 
		>

			<a href="https://twitter.com/intent/tweet?text=https://www.invenza.in/switch-to-sass/" target="_blank" class="twitter">
						<i class="fab fa-twitter"></i>
								</a>
	
			<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.invenza.in/switch-to-sass/" target="_blank" class="facebook">
						<i class="fab fa-facebook-f"></i>
								</a>
	
	
	
			<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.invenza.in%2Fswitch-to-sass%2F&title=title&source=Invenza+Solutions" target="_blank" class="linkedin">
						<i class="fab fa-linkedin"></i>
								</a>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	</div></div></div></div></div><div class="vc_row wpb_row vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_raw_code wpb_raw_js" >
		<div class="wpb_wrapper">
			<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

<script type="text/javascript">

// Wrap every letter in a span
var textWrapper = document.querySelector('.ml3');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");



anime.timeline({loop: false})
  .add({
    targets: '.ml3 .letter',
    opacity: [0,1],
    easing: "easeInOutQuad",
    duration: 600,
    delay: (el, i) => 65 * (i+1)
 /* }).add({
  targets: '.ml3',
  opacity: 0,
  duration: 1000,
  easing: "easeOutExpo",
  delay: 1000 */
  });
</script>
		</div>
	</div>
</div></div></div></div>
<p>The post <a rel="nofollow" href="https://www.invenza.in/switch-to-sass/">Switch to SASS</a> appeared first on <a rel="nofollow" href="https://www.invenza.in">Invenza Solutions</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
