Using Sass - Building on CSS

Oct 11, 20111 like1,032 views

The document discusses the benefits of using Sass and SCSS over regular CSS. Some key points covered include: - Sass/SCSS allows for nesting, variables, mixins and imports which make the code more organized, flexible and reusable. - Features like nesting and parent selectors reduce repeated code. Operations like math functions allow dynamic values. - Variables and partials allow separating code into reusable segments. Imports collect partials to reduce repetition. - Sass watches for changes and compiles to CSS automatically, improving the development workflow and catching errors. - SCSS is a superset of CSS so valid CSS is also valid SCSS, allowing seamless compatibility.

meta languages

.css .sass .scss

.border { .border .border{
  padding: 8px;   padding: $margin/2   padding: $margin/2;
  margin: 8px;   margin: $margin/2   margin: $margin/2;
} }

install

pre-installed ruby installer pre-installed
ruby

download
rubygems

install

pre-installed ruby installer pre-installed
ruby

download
rubygems

gem install sass

$ cd stylesheet‐folder‐or‐path

$ mv style.css style.scss 

$ sass ‐‐watch style.scss:style.css

:before

133 lines of code

25 lines of repeated code

no code indentation

nesting
.css .scss

header{ header{
width:100%; width:100%;
clear:both; clear:both;
margin: 10px auto; margin: 10px auto;
background-color: #ABDAD4; background-color: #ABDAD4;
}
h1{
header h1{ text-align: center;
text-align: center; line-height:100px;
line-height:100px; color:#007674;
color:#007674; }
} }

parenting for pseudo-classes
.css .scss

li{ li{
ﬂoat:left; ﬂoat:left;
margin:30px; margin:30px;
}
&:nth-child(odd) {
li:nth-child(odd) { -webkit-transform: scale(0.7);
-webkit-transform: scale(0.7); -moz-transform: scale(0.7);
-moz-transform: scale(0.7); }
} }

operations: + - / * %
.css .scss

.main{ $length:100%;
width:100%;
} .main{
width: $length;
.sidebar{ }
width:30%;
} .sidebar{
width:$length*0.3;
}

variables
.css .scss
.main{ $darkcolor:#007674;
background-color: #ABDAD4; $lightcolor:#ABDAD4;
}
.main{
.main h1{ background-color: $lightcolor;
color: #007674; h1{
} color: $darkcolor;
}
.sidebar{ }
background-color: #ABDAD4;
} .sidebar{
background-color: $lightcolor;
.sidebar h2{ h2{
color: #007674; color: $darkcolor;
} }
}

mixin
.css .scss

header{ @mixin rounded($radius){
-webkit-border-radius: 10px; -webkit-border-radius: $radius;
-moz-border-radius: 10px; -moz-border-radius: $radius;
border-radius: 10px; border-radius: $radius;
} }

header{
@include rounded(10px);
}

$import .css .scss #navbar li { /* _rounded.scss */ border-top-radius: 10px; -moz-border-radius-top: 10px; @mixin rounded($side, $radius: 10px) { -webkit-border-top-radius: 10px; } border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; #footer { -webkit-border-#{$side}-radius: $radius; border-top-radius: 5px; } -moz-border-radius-top: 5px; -webkit-border-top-radius: 5px; } /* style.scss */ #sidebar { border-left-radius: 8px; @import "rounded"; -moz-border-radius-left: 8px; -webkit-border-left-radius: 8px; } #navbar li { @include rounded(top); } #footer { @include rounded(top, 5px); } #sidebar { @include rounded(left, 8px); }$

checking

change detection
error messages
creating

compatibility

.scss

.css

every valid CSS3 stylesheet is valid SCSS

compatibility

.scss .css

pass on just the created .css ﬁle to any developer

:before :after
133 lines of code 110 lines of code

25 lines of repeated code 0 lines of repeated code

no code indentation .css automatic code indentation

.css ﬁle for future development

_partial.scss for future code reuse

faster code changes with dynamism

.scss compatible with .css codes

Resources - Install Resources - Sass
1. gem install sass 1. sass website
2. windows ruby installer 2. online editor
3. install rubygems 3. tutorial
4. documentation
5. compass with sass
6. the sass way - latest buzz
7. python compiler for scss

Resources - Less css
1. less css framework
2. scss vs. less wrangl
3. sass/less comparison
4. wrangl sass vs less

The document discusses using Sass (Syntactically Awesome StyleSheets) to simplify CSS by avoiding selector and style repetition, building in browser resets and common mixins, and requiring well-formatted code. It provides examples of how Sass allows nesting selectors to reduce repetition, uses variables and functions to DRY up styles, and leverages Compass mixins and resets. The overall message is that Sass can help organize, maintain, and improve CSS code quality.

Organizing & Simplifying CSS [with Sass]Matt Puchlerz

SassBram Verdyck

FCIP SASS TalkChris Schneider

The document discusses the benefits of using CSS preprocessors like SASS, SCSS, and LESS. They allow for reusable code through mixins and variables, eliminate repeated code, and make CSS more organized and readable. SASS uses Ruby syntax but compiles to plain CSS, so it does not require knowing Ruby. Features like nesting, math operations, and semantic class names help manage complex CSS rules and reduce file sizes. Libraries provide additional helper functions and semantic classes for tasks like layout grids.

Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsKaelig Deloumeau-Prigent

This document discusses using Sass and Compass to write CSS in a more maintainable way. It recommends approaches like object-oriented CSS (OOCSS) to separate structure from skin, avoiding deeply nested selectors, using variables, functions, mixins and extends to minimize repeated code. Compass is introduced as a tool providing cross-browser CSS3 mixins like for gradients, shadows, transitions and responsive grid layouts through plugins.

Css to-scssfrontendne

CSS preprocessor: why and howmirahman

This document discusses CSS preprocessors and focuses on Sass. It explains that CSS preprocessors allow for reusable, scalable, and smart CSS through features like variables, nesting, mixins, and imports. Sass is a popular preprocessor that has two syntaxes - SCSS which uses CSS syntax and Sass which uses indentation. Sass compiles preprocessed code into normal CSS files and offers powerful features to avoid repetition and make CSS more maintainable.

Css frameworksDimitar Belchugov

This document discusses CSS preprocessors like Sass, LESS, and Stylus. It provides examples of features like variables, nesting, mixins, and functions. Variables allow defining colors and values that can be reused. Nesting allows writing CSS rules for child elements within parent selectors. Mixins help avoid repetitive code through reusable rulesets. Functions and operations allow performing calculations to generate values. CSS preprocessors help write CSS faster and maintain large stylesheets through abstraction and organization.

Sass - Making CSS fun again.Gabriel Neutzling

The document introduces CSS preprocessors like Sass and Less. It discusses some of the weaknesses of CSS like lack of variables and abstraction. CSS preprocessors add features to CSS like variables, nesting, mixins and inheritance to make CSS more powerful and fun to work with. The document provides examples of how these features can be used in Sass to consolidate CSS code and make it more maintainable.

Rapid PrototypingEven Wu

Finding your way with Sass+Compassdrywallbmb

Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts

Pacific Northwest Drupal Summit: Basic & SASSSteve Krueger

What is Basic? Basic was originally developed for client projects. Originally a stripped down version of the ZEN theme, basic has now become its own concept of a theme starter. Basic boasts a clean HTML structure with extensible CSS classes and ID's for unlimited theming possibilities as well as a top-down load order for improved SEO. Basic's goal is to provide themers the building blocks needed to get their designs up and running quickly and simply. What is SASS? Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets. What will I Learn? We will guide you through using Basic with SASS and Compass to kick-start your next Drupal theming project and show you how easy it is to get started. We will also cover the syntax and file structure of using SASS and how to get your development environment up

CSS and LayoutJussi Pohjolainen

The document discusses CSS layout and elements. It explains that div and span elements are used to group XHTML elements and define layout, but do nothing without CSS. CSS is then used to style these elements and control positioning. The document provides examples of using div to lay out page sections like headers, navigation, content, and footers. It also explains CSS box model properties for layout like margins, padding, borders, and widths.

Sass presentationМарко Ковачевић

Sass is a CSS pre-processor that adds advanced features like nesting, variables, mixins, inheritance and extends. It has two syntaxes: SCSS, which is similar to CSS, and the indented syntax which does not use brackets or semicolons. To use Sass, Ruby must be installed along with the Sass gem. Compass is an optional framework that adds features like a watch system and custom mixins. Sass allows nesting rules, using variables, creating reusable styles with mixins, importing partial files, extending styles for DRY code, and performing operations.

Wrangling the CSS Beast with SassRob Friesel

Sass is an extension of CSS3 that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. (With a little help from Ruby) This talk will cover an overview of what Sass is, how to get it, run it, and use it, and show some examples of its magic. Code examples at: https://github.com/founddrama/vt-code-camp

CSSプリプロセッサの取扱説明書拓樹谷

The document discusses CSS preprocessors like Sass, LESS, and Stylus. It explains that preprocessors allow for features not available in regular CSS like variables, nesting, mixins and more. It provides examples of how preprocessors make CSS more modular and reusable by allowing things like defining colors as variables and creating mixins for common CSS properties. The document is intended to teach developers how to use preprocessors to write more efficient CSS code.

Auto tools祺周

Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)Adam Darowski

It's time to get sassy! By populer demand, this month's meetup features a talk by web developers Adam Darowski and Joel Oliviera on Sass (Syntactically Awesome Stylesheets). Learn how to make syling fun again with this simpler, more elegant syntax for CSS. Adam & Joel will explain the ins and outs of SASS by going through some step-by-step examples of how you can put it to use in your own workflow.

HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventRobert Nyman

JS.Chi CSS AnimationsJustin Meyer

The document discusses different techniques for animating elements with CSS and JavaScript, including CSS transitions, CSS animations, and jQuery animations. It provides code examples for defining CSS animations and keyframes, as well as JavaScript code for triggering animations by setting style properties and handling events. The document also outlines some issues to consider with animations like replayability, vendor prefixes, performance, and browser support.

Cracking for the Blue TeamJames '-- Mckinlay

CSS Box ModelGerson Abesamis

CSS'in Gücü AdınaAdem Ilter

DBIx::Skinnyと仲間たちRyo Miyake

DBIx::Skinny is an ORM framework that provides an ActiveRecord-like interface for working with databases in Perl. It allows defining schemas and table definitions, installing common triggers and inflate/deflate rules, and provides a Row class for interacting with rows. Relationships between models can be defined, along with traits like uniqueness. The framework aims to provide a simpler alternative to DBIx::Class with less boilerplate code.

My Adventures in Slovenia, Croatia, Serbia and HungarySayanee Basu

CinemagraphSayanee Basu

The document provides information about cinemagraphs, including what they are, their composition and history, tips for creating them, necessary tools, and step-by-step instructions. Cinemagraphs are animated pictures created from video that emphasize subtle, repetitive motions. They were invented in 1987 and are composed of both static and animated elements from video. The document outlines tips for shooting and processing video into cinemagraphs, as well as tools and a process involving cropping video, importing into Photoshop, and saving as GIF files. It also lists additional resources for learning about cinemagraphs.

Web Frameworks for 6 year oldsSayanee Basu

The document discusses different programming languages and frameworks for building web applications, including Ruby on Rails and Django. It provides code examples for quickly setting up a basic blog application in 10 lines of code using Rails or in minutes using Django. Guidance is given for learning programming including installing dependencies, using version control, and seeking help from online resources when debugging.

Creating Art with Codes - CSS3Sayanee Basu

This document provides an overview of 8 different techniques for creating artistic text effects with CSS3: 1) Using fancy web fonts, 2) Adding text shadows, 3) Creating rounded corners, 4) Applying box shadows, 5) Generating gradients, 6) Outlining text with strokes, 7) Clipping backgrounds to text, and 8) Adding reflections. For each technique, it provides a brief description and examples of the CSS code needed to implement the effect.

More Related Content

What's hot (18)

Css frameworksDimitar Belchugov

Sass - Making CSS fun again.Gabriel Neutzling

Rapid PrototypingEven Wu

Finding your way with Sass+Compassdrywallbmb

Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts

Pacific Northwest Drupal Summit: Basic & SASSSteve Krueger

CSS and LayoutJussi Pohjolainen

Sass presentationМарко Ковачевић

Wrangling the CSS Beast with SassRob Friesel

CSSプリプロセッサの取扱説明書拓樹谷

Auto tools祺周

Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)Adam Darowski

HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventRobert Nyman

JS.Chi CSS AnimationsJustin Meyer

Cracking for the Blue TeamJames '-- Mckinlay

CSS Box ModelGerson Abesamis

CSS'in Gücü AdınaAdem Ilter

DBIx::Skinnyと仲間たちRyo Miyake

Css frameworksDimitar Belchugov

Sass - Making CSS fun again.Gabriel Neutzling

Rapid PrototypingEven Wu

Finding your way with Sass+Compassdrywallbmb

Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts

Pacific Northwest Drupal Summit: Basic & SASSSteve Krueger

CSS and LayoutJussi Pohjolainen

Sass presentationМарко Ковачевић

Wrangling the CSS Beast with SassRob Friesel

CSSプリプロセッサの取扱説明書拓樹谷

Auto tools祺周

Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)Adam Darowski

HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventRobert Nyman

JS.Chi CSS AnimationsJustin Meyer

Cracking for the Blue TeamJames '-- Mckinlay

CSS Box ModelGerson Abesamis

CSS'in Gücü AdınaAdem Ilter

DBIx::Skinnyと仲間たちRyo Miyake

Viewers also liked (7)

My Adventures in Slovenia, Croatia, Serbia and HungarySayanee Basu

CinemagraphSayanee Basu

Web Frameworks for 6 year oldsSayanee Basu

Creating Art with Codes - CSS3Sayanee Basu

RaspberryPI + Google CoderSayanee Basu

This document provides instructions for setting up a Raspberry Pi with Google Coder to teach JavaScript programming. It lists the required materials which include a Raspberry Pi, power supply, router, Ethernet cable, SD card and laptop. It then provides steps to download the Coder software, set a static IP address on the Raspberry Pi, connect the Pi to the laptop via Ethernet and SD card, and access the Coder interface by going to a provided URL in the laptop's browser.

Evolution of Programming LanguagesSayanee Basu

The document discusses the evolution of computer programming languages from the earliest languages like Fortran and ALGOL in the 1950s to more modern languages like JavaScript, Python, and C#. It notes that in the evolution of computer languages, older species/languages do not necessarily die out, branches can converge, and mutations are not purely random. The document asks questions about the reader's favorite or current language and programming in general.

Арматураifranz74

My Adventures in Slovenia, Croatia, Serbia and HungarySayanee Basu

CinemagraphSayanee Basu

Web Frameworks for 6 year oldsSayanee Basu

Creating Art with Codes - CSS3Sayanee Basu

RaspberryPI + Google CoderSayanee Basu

Evolution of Programming LanguagesSayanee Basu

Арматураifranz74

Similar to Using Sass - Building on CSS (20)

CSS ExtendersIdan Gazit

This document summarizes and compares CSS preprocessor tools Sass and LESS. Both tools allow for variables, mixins, nested rules and other features to aid in writing CSS in a more modular way. Sass uses the SCSS syntax which is a CSS superset, while LESS uses its own syntax. Both compile to plain CSS. The Compass framework is also mentioned, which builds on Sass and provides reusable components and a workflow for building CSS.

Preprocessor presentationMario Noble

Save time by using SASS/SCSSBerit Hlubek

This presentation is targeted to everyone interested in an easier way of creating and updating CSS for your websites. It shows the great benefits of using SASS/SCSS for design implementation. With the usage of SASS you gain the possibility to write CSS while using variables, nesting of styles and other flexible techniques like the powerful mixins, selector inheritance, basic operations (e.g. numbers, colors) or interpolation. The written code will be compiled into standard CSS and for meeting the different needs the output format can be configured e.g. compressed which will create a minified CSS file. For using SASS in your TYPO3 project right now the extension sassify is ready for editing and compiling SASS directly inside your TYPO3 installation.

Sass and Compass - Getting Startededgincvg

Accelerated StylesheetsWynn Netherland

This document discusses accelerated CSS techniques using tools like CSS frameworks, JavaScript, and CSS preprocessors. It introduces concepts like nested rules, variables, mixins, extends, imports, and powerful functions in CSS preprocessors that allow generating complex CSS from simpler code. CSS frameworks like Blueprint and modules for CSS3 properties are demonstrated. Image sprites are also mentioned briefly.

Intro to SASS CSSKianosh Pourian

SASS (Syntactically Awesome StyleSheets) is a CSS pre-processor that allows for nested rules, variables, mixins and more to extend the functionality of CSS. It compiles into regular CSS. Key features include nesting rules to reduce repetition, using variables to define common values for reuse, and creating mixins for commonly used CSS patterns or properties. SASS also allows for logic and functions. COMPASS is an open-source framework built on SASS that provides pre-made mixins and modules for common CSS patterns to simplify development.

Sass&compassMin Jun Kim

This document discusses Sass & Compass. It provides an overview of Sass features like variables, nesting, mixins, and selector inheritance. It also covers installing Sass and the differences between .scss and .sass syntax. Compass is introduced as an open-source CSS authoring framework that uses Sass. Compass features like presentation-free markup, reusable patterns, easy sprites, and CSS3 mixins are highlighted. Best practices for Compass like creating a _base.scss partial file are also mentioned.

Compass And Sass(Tim Riley)elliando dias

The document discusses Compass, an open-source CSS authoring framework that uses Sass for stylesheets. Compass combines CSS frameworks like Blueprint with the Sass syntax and provides its own CSS utilities. It allows mixing and matching elements from different frameworks. Compass makes it easier to develop stylesheets for semantic HTML and avoid browser compatibility issues. It can be used standalone, with Rails, or with Sinatra.

Theming and SassJames Pearce

Sass Essentials at Mobile Camp LAJake Johnson

This document discusses using CSS preprocessors like LESS, Sass, and Stylus to build mobile web apps. It covers getting started with Sass and Compass, using variables, operations, nesting, mixins, and other Sass features. It also discusses object-oriented CSS techniques like separating structure and skin, and container and content. The goal is to speed up front-end workflows and make CSS reusable, modular, and scalable.

Make your CSS beautiful againspannerspace Hales

This is the first of three presentations detailing the front end optimization of goodtoknow.co.uk. Part one describes how we refactored the CSS, part two will address the HTML structure and implementation of Behat tests, and part three will contend with image optimization specifically addressing data URI’s and sprites. Full notes here: http://spannerspace.com/make-your-css-beautiful-again/

Team stylesnathanscott

Stylesheets of the future with Sass and CompassDave Ross

The document summarizes key features of Sass (Syntactically Awesome Style Sheets), a CSS extension language. It discusses how Sass allows for nesting, variables, math functions, mixins, media queries, inheritance, and integration with frameworks like Compass to provide cross-browser CSS3 capabilities and grid systems. The document encourages trying out Sass with tools like CodeKit, Compass.app, or by installing the Sass Ruby gem.

Big Design Conference: CSS3 Wynn Netherland

CSS frameworks allow for nested rules, variables, mixins, extends and imports to simplify stylesheet maintenance. Preprocessors like Sass compile CSS with additional features like nested selectors, variables, functions and mixins. Popular frameworks include Blueprint and Compass which provide tools and patterns for common tasks. Preprocessors increase abstraction and reduce duplication, improving organization and simplifying code.

Doing more with LESSjsmith92

This document discusses the CSS preprocessor LESS and its features. LESS allows for nested rules, mixins, variables, imports and operators to make CSS more maintainable. It can be run from Node.js or a browser and compiles LESS files into normal CSS. Key features include mixins for common CSS patterns, variables for consistency, nesting for organization and imports to modularize code. LESS aims to make CSS leaner, meaner and more dynamic through its preprocessing abilities.

SassGuilherme

Sass is an extension of CSS that adds features like nested rules, variables, mixins, inheritance and more. It compiles to standard CSS. Sass allows CSS code to be more modular, reusable and maintainable by adding these advanced features. Some key features of Sass include nesting rules to organize CSS, creating mixins to reuse CSS rules, and using variables to define colors and values that can be changed globally. Sass code is translated to normal CSS for browser compatibility.

Dojo: Sass - Syntactically Awesome StylesheetsGuilherme

Sass is an extension of CSS that adds features like nested rules, variables, mixins, inheritance and more. It compiles to standard CSS. Sass allows CSS code to be more modular, reusable and maintainable by adding these advanced features. Some key features of Sass include nesting rules to organize selectors hierarchically, defining variables to avoid hard-coded values, creating mixins to reuse CSS declarations, and using Compass to easily include CSS3 properties.

CSS: A Slippery Slope to the BackendFITC

Save 10% off any FITC upcoming event with discount code 'slideshare'. Details at www.fitc.ca OVERVIEW Think CSS isn’t important? Or just for girls? Or an afterthought like accessibility or security? Spoiler alert: you’re wrong (about all of those)! CSS has become the gateway drug for most novices and designers-turned-programmer; with preprocessors like LESS and SASS making it easier and easier for web developers to get further down the rabbit hole. In this talk, Kacey will cover a brief history of CSS and where it stands today, the difference between and how to use preprocessors, and where we can likely expect CSS to go in the future. If you’ve ever wondered why UX developers love LESS/SASS, why preprocessors are essential in todays tech stack, then this talk is for you! OBJECTIVE Attempt to explain/dismystify CSS as it stands today TARGET AUDIENCE Anyone working in, or interested in, web development ASSUMED AUDIENCE KNOWLEDGE Little to no web development knowledge needed FIVE THINGS AUDIENCE MEMBERS WILL LEARN Why is CSS important What preprocessors do Some basic Sass mixins How preprocessors make your life easier How CSS is becoming more like JS

Finding a Better Way to CSS: Navigating Sass with CompassClaudina Sarahe

Knowing how to leverage Sass is ultimately what exposes its advantages over writing CSS unaided. This session is about common and useful Sass utilities. It focuses on getting the most from Sass through Compass as well as Sass properties and functions. We'll also cover core Compass imports, file organization best practices, and tips for approaching designs with Sass thinking. Full session description: http://www.drupaldelphia.com/sessions/finding-better-way-css-navigating-sass-compass

SASS PreprocessorWebkul Software Pvt. Ltd.

CSS ExtendersIdan Gazit

Preprocessor presentationMario Noble

Save time by using SASS/SCSSBerit Hlubek

Sass and Compass - Getting Startededgincvg

Accelerated StylesheetsWynn Netherland

Intro to SASS CSSKianosh Pourian

Sass&compassMin Jun Kim

Compass And Sass(Tim Riley)elliando dias

Theming and SassJames Pearce

Sass Essentials at Mobile Camp LAJake Johnson

Make your CSS beautiful againspannerspace Hales

Team stylesnathanscott

Stylesheets of the future with Sass and CompassDave Ross

Big Design Conference: CSS3 Wynn Netherland

Doing more with LESSjsmith92

SassGuilherme

Dojo: Sass - Syntactically Awesome StylesheetsGuilherme

CSS: A Slippery Slope to the BackendFITC

Finding a Better Way to CSS: Navigating Sass with CompassClaudina Sarahe

SASS PreprocessorWebkul Software Pvt. Ltd.

More from Sayanee Basu (6)

Responsive Web DesignSayanee Basu

The document discusses responsive web design. It defines responsive design as being adaptive, fluid, flexible and flowing across devices. It recommends using fluid layouts with percentages instead of pixels, media queries to target different screen sizes, and flexible media like images that scale based on the viewport width. It provides examples of responsive websites and tools used like browsers, text editors, simulators and coding. It outlines the key aspects of responsive design including fluid layouts, media queries, and flexible media. It also lists additional resources like blogs, books and videos for learning more about responsive design.

Summer & Winter in SloveniaSayanee Basu

Popular destinations in Slovenia include Bled known for its castle, island, and lake; Bohinj featuring a waterfall, lake, and huts; and Ljubljana with its 3 bridges, castle, and river. Other places mentioned are Maribor known for its town centre and serenity, Rogla popular for skiing in the winter, and Koper and Piran on the sea coast with Venetian architecture. Basic tips are provided on transportation within Slovenia including trains, buses, and public transport in Ljubljana.

Open CommunitySayanee Basu

From Singapore to SloveniaSayanee Basu

Open Community - The Future of ConnectingSayanee Basu

Colors of the SkySayanee Basu

The document discusses how Hubble space telescope images are created and processed. It recommends downloading the FITS Liberator Photoshop plugin to view and work with raw telescope image files (FITS files). The plugin allows users to capture, colorize and combine FITS files to produce Hubble-style images. Links are provided to resources about the Hubble telescope, FITS files standards and processing tutorials.

Responsive Web DesignSayanee Basu

Summer & Winter in SloveniaSayanee Basu

Open CommunitySayanee Basu

From Singapore to SloveniaSayanee Basu

Open Community - The Future of ConnectingSayanee Basu

Colors of the SkySayanee Basu

Recently uploaded (20)

"AI in the browser: predicting user actions in real time with TensorflowJS", ...Fwdays

With AI becoming increasingly present in our everyday lives, the latest advancements in the field now make it easier than ever to integrate it into our software projects. In this session, we’ll explore how machine learning models can be embedded directly into front-end applications. We'll walk through practical examples, including running basic models such as linear regression and random forest classifiers, all within the browser environment. Once we grasp the fundamentals of running ML models on the client side, we’ll dive into real-world use cases for web applications—ranging from real-time data classification and interpolation to object tracking in the browser. We'll also introduce a novel approach: dynamically optimizing web applications by predicting user behavior in real time using a machine learning model. This opens the door to smarter, more adaptive user experiences and can significantly improve both performance and engagement. In addition to the technical insights, we’ll also touch on best practices, potential challenges, and the tools that make browser-based machine learning development more accessible. Whether you're a developer looking to experiment with ML or someone aiming to bring more intelligence into your web apps, this session will offer practical takeaways and inspiration for your next project.

Master tester AI toolbox - Kari Kakkonen at Testaus ja AI 2025 ProfessioKari Kakkonen

Cyber security cyber security cyber security cyber security cyber security cy...pranavbodhak

STKI Israel Market Study 2025 final v1 versionDr. Jimmy Schwarzkopf

ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptxJasper Oosterveld

New Ways to Reduce Database Costs with ScyllaDBScyllaDB

How ScyllaDB’s latest capabilities can reduce your infrastructure costs ScyllaDB has been obsessed with price-performance from day 1. Our core database is architected with low-level engineering optimizations that squeeze every ounce of power from the underlying infrastructure. And we just completed a multi-year effort to introduce a set of new capabilities for additional savings. Join this webinar to learn about these new capabilities: the underlying challenges we wanted to address, the workloads that will benefit most from each, and how to get started. We’ll cover ways to: - Avoid overprovisioning with “just-in-time” scaling - Safely operate at up to ~90% storage utilization - Cut network costs with new compression strategies and file-based streaming We’ll also highlight a “hidden gem” capability that lets you safely balance multiple workloads in a single cluster. To conclude, we will share the efficiency-focused capabilities on our short-term and long-term roadmaps.

What is DePIN? The Hottest Trend in Web3 Right Now!cryptouniversityoffi

John Carmack’s Notes From His Upper Bound 2025 TalkRazin Mustafiz

Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025Nikki Chapple

Session | Protecting Your Sensitive Data with Microsoft Purview: Practical Information Protection and DLP Strategies Presenter | Nikki Chapple (MVP| Principal Cloud Architect CloudWay) & Ryan John Murphy (Microsoft) Event | IRMS Conference 2025 Format | Birmingham UK Date | 18-20 May 2025 In this closing keynote session from the IRMS Conference 2025, Nikki Chapple and Ryan John Murphy deliver a compelling and practical guide to data protection, compliance, and information governance using Microsoft Purview. As organizations generate over 2 billion pieces of content daily in Microsoft 365, the need for robust data classification, sensitivity labeling, and Data Loss Prevention (DLP) has never been more urgent. This session addresses the growing challenge of managing unstructured data, with 73% of sensitive content remaining undiscovered and unclassified. Using a mountaineering metaphor, the speakers introduce the “Secure by Default” blueprint—a four-phase maturity model designed to help organizations scale their data security journey with confidence, clarity, and control. 🔐 Key Topics and Microsoft 365 Security Features Covered: Microsoft Purview Information Protection and DLP Sensitivity labels, auto-labeling, and adaptive protection Data discovery, classification, and content labeling DLP for both labeled and unlabeled content SharePoint Advanced Management for workspace governance Microsoft 365 compliance center best practices Real-world case study: reducing 42 sensitivity labels to 4 parent labels Empowering users through training, change management, and adoption strategies 🧭 The Secure by Default Path – Microsoft Purview Maturity Model: Foundational – Apply default sensitivity labels at content creation; train users to manage exceptions; implement DLP for labeled content. Managed – Focus on crown jewel data; use client-side auto-labeling; apply DLP to unlabeled content; enable adaptive protection. Optimized – Auto-label historical content; simulate and test policies; use advanced classifiers to identify sensitive data at scale. Strategic – Conduct operational reviews; identify new labeling scenarios; implement workspace governance using SharePoint Advanced Management. 🎒 Top Takeaways for Information Management Professionals: Start secure. Stay protected. Expand with purpose. Simplify your sensitivity label taxonomy for better adoption. Train your users—they are your first line of defense. Don’t wait for perfection—start small and iterate fast. Align your data protection strategy with business goals and regulatory requirements. 💡 Who Should Watch This Presentation? This session is ideal for compliance officers, IT administrators, records managers, data protection officers (DPOs), security architects, and Microsoft 365 governance leads. Whether you're in the public sector, financial services, healthcare, or education. 🔗 Read the blog: https://nikkichapple.com/irms-conference-2025/

cloudgenesis cloud workshop , gdg on campus mitasiyaldhande02

Step into the future of cloud computing with CloudGenesis, a power-packed workshop curated by GDG on Campus MITA, designed to equip students and aspiring cloud professionals with hands-on experience in Google Cloud Platform (GCP), Microsoft Azure, and Azure Al services. This workshop offers a rare opportunity to explore real-world multi-cloud strategies, dive deep into cloud deployment practices, and harness the potential of Al-powered cloud solutions. Through guided labs and live demonstrations, participants will gain valuable exposure to both platforms- enabling them to think beyond silos and embrace a cross-cloud approach to development and innovation.

Offshore IT Support: Balancing In-House and Offshore Help Desk Techniciansjohn823664

In today's always-on digital environment, businesses must deliver seamless IT support across time zones, devices, and departments. This SlideShare explores how companies can strategically combine in-house expertise with offshore talent to build a high-performing, cost-efficient help desk operation. From the benefits and challenges of offshore support to practical models for integrating global teams, this presentation offers insights, real-world examples, and key metrics for success. Whether you're scaling a startup or optimizing enterprise support, discover how to balance cost, quality, and responsiveness with a hybrid IT support strategy. Perfect for IT managers, operations leads, and business owners considering global help desk solutions.

Introducing the OSA 3200 SP and OSA 3250 ePRCAdtran

Multistream in SIP and NoSIP @ OpenSIPS Summit 2025Lorenzo Miniero

Slides for my "Multistream support in the Janus SIP and NoSIP plugins" presentation at the OpenSIPS Summit 2025 event. They describe my efforts refactoring the Janus SIP and NoSIP plugins to allow for the gatewaying of an arbitrary number of audio/video streams per call (thus breaking the current 1-audio/1-video limitation), plus some additional considerations on what this could mean when dealing with application protocols negotiated via SIP as well.

TrustArc Webinar: Mastering Privacy ContractingTrustArc

As data privacy regulations become more pervasive across the globe and organizations increasingly handle and transfer (including across borders) meaningful volumes of personal and confidential information, the need for robust contracts to be in place is more important than ever. This webinar will provide a deep dive into privacy contracting, covering essential terms and concepts, negotiation strategies, and key practices for managing data privacy risks. Whether you're in legal, privacy, security, compliance, GRC, procurement, or otherwise, this session will include actionable insights and practical strategies to help you enhance your agreements, reduce risk, and enable your business to move fast while protecting itself. This webinar will review key aspects and considerations in privacy contracting, including: - Data processing addenda, cross-border transfer terms including EU Model Clauses/Standard Contractual Clauses, etc. - Certain legally-required provisions (as well as how to ensure compliance with those provisions) - Negotiation tactics and common issues - Recent lessons from recent regulatory actions and disputes

AI Emotional Actors: “When Machines Learn to Feel and Perform"AkashKumar809858

A Comprehensive Guide on Integrating Monoova Payment Gatewaydanielle hunter

Agentic AI - The New Era of IntelligenceMuzammil Shah

This presentation is specifically designed to introduce final-year university students to the foundational principles of Agentic Artificial Intelligence (AI). It aims to provide a clear understanding of how Agentic AI systems function, their key components, and the underlying technologies that empower them. By exploring real-world applications and emerging trends, the session will equip students with essential knowledge to engage with this rapidly evolving area of AI, preparing them for further study or professional work in the field.

Supercharge Your AI Development with Local LLMsFrancesco Corti

In today's AI development landscape, developers face significant challenges when building applications that leverage powerful large language models (LLMs) through SaaS platforms like ChatGPT, Gemini, and others. While these services offer impressive capabilities, they come with substantial costs that can quickly escalate especially during the development lifecycle. Additionally, the inherent latency of web-based APIs creates frustrating bottlenecks during the critical testing and iteration phases of development, slowing down innovation and frustrating developers. This talk will introduce the transformative approach of integrating local LLMs directly into their development environments. By bringing these models closer to where the code lives, developers can dramatically accelerate development lifecycles while maintaining complete control over model selection and configuration. This methodology effectively reduces costs to zero by eliminating dependency on pay-per-use SaaS services, while opening new possibilities for comprehensive integration testing, rapid prototyping, and specialized use cases.

SAP Sapphire 2025 ERP1612 Enhancing User Experience with SAP Fiori and AIPeter Spielvogel

Splunk Leadership Forum Wien - 20.05.2025Splunk

"AI in the browser: predicting user actions in real time with TensorflowJS", ...Fwdays

Master tester AI toolbox - Kari Kakkonen at Testaus ja AI 2025 ProfessioKari Kakkonen

Cyber security cyber security cyber security cyber security cyber security cy...pranavbodhak

STKI Israel Market Study 2025 final v1 versionDr. Jimmy Schwarzkopf

ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptxJasper Oosterveld

New Ways to Reduce Database Costs with ScyllaDBScyllaDB

What is DePIN? The Hottest Trend in Web3 Right Now!cryptouniversityoffi

John Carmack’s Notes From His Upper Bound 2025 TalkRazin Mustafiz

Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025Nikki Chapple

cloudgenesis cloud workshop , gdg on campus mitasiyaldhande02

Offshore IT Support: Balancing In-House and Offshore Help Desk Techniciansjohn823664

Introducing the OSA 3200 SP and OSA 3250 ePRCAdtran

Multistream in SIP and NoSIP @ OpenSIPS Summit 2025Lorenzo Miniero

TrustArc Webinar: Mastering Privacy ContractingTrustArc

AI Emotional Actors: “When Machines Learn to Feel and Perform"AkashKumar809858

A Comprehensive Guide on Integrating Monoova Payment Gatewaydanielle hunter

Agentic AI - The New Era of IntelligenceMuzammil Shah

Supercharge Your AI Development with Local LLMsFrancesco Corti

SAP Sapphire 2025 ERP1612 Enhancing User Experience with SAP Fiori and AIPeter Spielvogel

Splunk Leadership Forum Wien - 20.05.2025Splunk

Using Sass - Building on CSS

1. Building on CSS

2. www. sayan.ee code . explorer . speaker

3. code is poetry

4. code is poetry fast ﬂexible fun

5. meta languages .css .sass .scss

6. meta languages .css .sass .scss .border { .border .border{   padding: 8px;   padding: $margin/2   padding: $margin/2;   margin: 8px;   margin: $margin/2   margin: $margin/2; } }

7. install pre-installed ruby installer pre-installed ruby download rubygems

8. install pre-installed ruby installer pre-installed ruby download rubygems gem install sass

10. $ cd stylesheet‐folder‐or‐path $ mv style.css style.scss  $ sass ‐‐watch style.scss:style.css

11. code is poetry fast ﬂexible fun

12. :before 133 lines of code 25 lines of repeated code no code indentation

13. fast nesting parenting operations

14. nesting .css .scss header{ header{ width:100%; width:100%; clear:both; clear:both; margin: 10px auto; margin: 10px auto; background-color: #ABDAD4; background-color: #ABDAD4; } h1{ header h1{ text-align: center; text-align: center; line-height:100px; line-height:100px; color:#007674; color:#007674; } } }

15. parenting for pseudo-classes .css .scss li{ li{ ﬂoat:left; ﬂoat:left; margin:30px; margin:30px; } &:nth-child(odd) { li:nth-child(odd) { -webkit-transform: scale(0.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -moz-transform: scale(0.7); } } }

16. operations: + - / * % .css .scss .main{ $length:100%; width:100%; } .main{ width: $length; .sidebar{ } width:30%; } .sidebar{ width:$length*0.3; }

17. ﬂexible variables mixin import

18. variables .css .scss .main{ $darkcolor:#007674; background-color: #ABDAD4; $lightcolor:#ABDAD4; } .main{ .main h1{ background-color: $lightcolor; color: #007674; h1{ } color: $darkcolor; } .sidebar{ } background-color: #ABDAD4; } .sidebar{ background-color: $lightcolor; .sidebar h2{ h2{ color: #007674; color: $darkcolor; } } }

19. mixin .css .scss header{ @mixin rounded($radius){ -webkit-border-radius: 10px; -webkit-border-radius: $radius; -moz-border-radius: 10px; -moz-border-radius: $radius; border-radius: 10px; border-radius: $radius; } } header{ @include rounded(10px); }

20. import .css .scss #navbar li { /* _rounded.scss */ border-top-radius: 10px; -moz-border-radius-top: 10px; @mixin rounded($side, $radius: 10px) { -webkit-border-top-radius: 10px; } border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; #footer { -webkit-border-#{$side}-radius: $radius; border-top-radius: 5px; } -moz-border-radius-top: 5px; -webkit-border-top-radius: 5px; } /* style.scss */ #sidebar { border-left-radius: 8px; @import "rounded"; -moz-border-radius-left: 8px; -webkit-border-left-radius: 8px; } #navbar li { @include rounded(top); } #footer { @include rounded(top, 5px); } #sidebar { @include rounded(left, 8px); }

21. fun checking extensions compatibility

22. checking change detection error messages creating

23. checking change detection error messages creating

24. extensions

25. compatibility .scss .css every valid CSS3 stylesheet is valid SCSS

26. compatibility .scss .css pass on just the created .css ﬁle to any developer

27. :before :after 133 lines of code 110 lines of code 25 lines of repeated code 0 lines of repeated code no code indentation .css automatic code indentation .css ﬁle for future development _partial.scss for future code reuse faster code changes with dynamism .scss compatible with .css codes

28. Resources - Install Resources - Sass 1. gem install sass 1. sass website 2. windows ruby installer 2. online editor 3. install rubygems 3. tutorial 4. documentation 5. compass with sass 6. the sass way - latest buzz 7. python compiler for scss Resources - Less css 1. less css framework 2. scss vs. less wrangl 3. sass/less comparison 4. wrangl sass vs less

29. Q?

30. @sayanee_ slides + codes

Editor's Notes

#2: \n
#3: \n
#4: \n
#5: \n
#6: \n
#7: \n
#8: \n
#9: \n
#10: \n
#11: \n
#12: \n
#13: \n
#14: \n
#15: \n
#16: \n
#17: \n
#18: \n
#19: \n
#20: \n
#21: \n
#22: \n
#23: \n
#24: \n
#25: \n
#26: \n
#27: \n
#28: \n
#29: \n
#30: \n
#31: \n

Using Sass - Building on CSS

Recommended

More Related Content

What's hot (18)

Viewers also liked (7)

Similar to Using Sass - Building on CSS (20)

More from Sayanee Basu (6)

Recently uploaded (20)

Using Sass - Building on CSS

Editor's Notes