The document discusses CSS and common frustrations developers have with it. It notes that CSS is still difficult today due to browser calculations that can cause styles to not work as expected or parent elements to miscalculate sizes when children are floated or positioned. CSS preprocessors like SASS aim to address these issues by standardizing property values and handling browser differences, providing a more consistent development experience across browsers.
An introduction and demonstration of graphics and animation techniques using canvas and CSS3 working in concert in webkit with html5. Targeted for Palm webOS devices, but compatible with other webkit implementations.
From Aaron Bushnell: You never know if you'll like something until you try it. That's why I recommend trying Sass for your CSS coding. Using the DRY method (Don't Repeat Yourself), Sass makes your coding easy, quick, and beautiful.
10 Advanced CSS Techniques (You Wish You Knew More About)Emily Lewis
Presentation for Webuquerque's November 2, 2011 event.
Practical examples of some of the latest CSS 3 techniques (and a few often-forgotten CSS 2.1 ones) including: image-free gradients and text shadows, attribute selectors, transitions and transforms, and media queries
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
An overview of the current state of Vector graphics on the web, why we would want to use them, what the options are. Presented to the Boston Ruby group at the January 2011 meeting.
An introduction and demonstration of graphics and animation techniques using canvas and CSS3 working in concert in webkit with html5. Targeted for Palm webOS devices, but compatible with other webkit implementations.
From Aaron Bushnell: You never know if you'll like something until you try it. That's why I recommend trying Sass for your CSS coding. Using the DRY method (Don't Repeat Yourself), Sass makes your coding easy, quick, and beautiful.
10 Advanced CSS Techniques (You Wish You Knew More About)Emily Lewis
Presentation for Webuquerque's November 2, 2011 event.
Practical examples of some of the latest CSS 3 techniques (and a few often-forgotten CSS 2.1 ones) including: image-free gradients and text shadows, attribute selectors, transitions and transforms, and media queries
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
An overview of the current state of Vector graphics on the web, why we would want to use them, what the options are. Presented to the Boston Ruby group at the January 2011 meeting.
Asit Hyderabad is providing best "CSS" course and helped them to take internship program which is helped to get real time exposure and placements in corporate industries. For more details Please visit our website.
HTML Tour - Buenas prácticas en el desarrollo webPlain Concepts
El objetivo de esta sesión es mejorarle la vida al desarrollador. Mediante herramientas y buenas prácticas veremos cómo cometer menos errores y como testear javascript, como ser mucho más productivos con nuestras css’s y evitar el caos mediante OOCSS y less. Para finalizar veremos el proceso de subida a producción de nuestra aplicación.
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/
A brief overview of the current state of CSS Best Practices.
The talk will cover Frameworks, Methodologies, Naming Schemes and Preprocessors.
I’ll also go over how this fits into the changes we’ve been making to the CSS structure on the JUST EAT International Platform.
Slides presented at DrupalCamp Montreal 2013. Walks through the features of the Zen theme, how to use Sass and Compass, and finally, how to use Zen Grids to change the layout. Conclusion: Zen Grids simplifies the process of changing the layout, so makes responsive design a lot easier to implement.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
GridMate - End to end testing is a critical piece to ensure quality and avoid...ThomasParaiso2
End to end testing is a critical piece to ensure quality and avoid regressions. In this session, we share our journey building an E2E testing pipeline for GridMate components (LWC and Aura) using Cypress, JSForce, FakerJS…
Asit Hyderabad is providing best "CSS" course and helped them to take internship program which is helped to get real time exposure and placements in corporate industries. For more details Please visit our website.
HTML Tour - Buenas prácticas en el desarrollo webPlain Concepts
El objetivo de esta sesión es mejorarle la vida al desarrollador. Mediante herramientas y buenas prácticas veremos cómo cometer menos errores y como testear javascript, como ser mucho más productivos con nuestras css’s y evitar el caos mediante OOCSS y less. Para finalizar veremos el proceso de subida a producción de nuestra aplicación.
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/
A brief overview of the current state of CSS Best Practices.
The talk will cover Frameworks, Methodologies, Naming Schemes and Preprocessors.
I’ll also go over how this fits into the changes we’ve been making to the CSS structure on the JUST EAT International Platform.
Slides presented at DrupalCamp Montreal 2013. Walks through the features of the Zen theme, how to use Sass and Compass, and finally, how to use Zen Grids to change the layout. Conclusion: Zen Grids simplifies the process of changing the layout, so makes responsive design a lot easier to implement.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
GridMate - End to end testing is a critical piece to ensure quality and avoid...ThomasParaiso2
End to end testing is a critical piece to ensure quality and avoid regressions. In this session, we share our journey building an E2E testing pipeline for GridMate components (LWC and Aura) using Cypress, JSForce, FakerJS…
A tale of scale & speed: How the US Navy is enabling software delivery from l...sonjaschweigert1
Rapid and secure feature delivery is a goal across every application team and every branch of the DoD. The Navy’s DevSecOps platform, Party Barge, has achieved:
- Reduction in onboarding time from 5 weeks to 1 day
- Improved developer experience and productivity through actionable findings and reduction of false positives
- Maintenance of superior security standards and inherent policy enforcement with Authorization to Operate (ATO)
Development teams can ship efficiently and ensure applications are cyber ready for Navy Authorizing Officials (AOs). In this webinar, Sigma Defense and Anchore will give attendees a look behind the scenes and demo secure pipeline automation and security artifacts that speed up application ATO and time to production.
We will cover:
- How to remove silos in DevSecOps
- How to build efficient development pipeline roles and component templates
- How to deliver security artifacts that matter for ATO’s (SBOMs, vulnerability reports, and policy evidence)
- How to streamline operations with automated policy checks on container images
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...Neo4j
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
UiPath Test Automation using UiPath Test Suite series, part 5DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
UiPath Test Automation using UiPath Test Suite series, part 5
CSS, SASS & Compass at WDCNZ
1. Preparation H is a hemorrhoid creme, and it’s the title of this presentation
2. CSS is a pain in the ass
Because at one point in time we’ve all thought that CSS is a pain in the ass
3. SASS & Compass will make writing CSS easier
But first this is what people think about CSS
That may be true, but it’s getting better. CSS preprocessors will help you write CSS, but before we jump in here’s what people
think of CSS
4. CSS makes me want to kill myself
@mullets4lyfe
Mastering CSS is like mastering throwing shit into a fan
@hatianminera
CSS sucks! Can we please go back to intuitive tables?
@delainanicole
CSS is fun. You just need to be in the right mood & have patience. Bit like anal sex
@darwoodster
I fucking hate CSS. strait up, going to kill its children
@clearasconcrete
God I hate CSS. Its not proper development, is it?
@fergalleon
I'm going through all nine circles of CSS hell
@gijsdekoning
These are all within the last week or two. CSS is still hard today, for everyone
5. suicidal thoughts
CSS makes me want to kill myself
@mullets4lyfe
Mastering CSS is like mastering throwing shit into a fan
@hatianminera
CSS sucks! Can we please go back to intuitive tables?
@delainanicole
CSS is fun. You just need to be in the right mood & have patience. Bit like anal sex
@darwoodster
I fucking hate CSS. strait up, going to kill its children
@clearasconcrete
God I hate CSS. Its not proper development, is it?
@fergalleon
I'm going through all nine circles of CSS hell
@gijsdekoning
everlasting divine punishment
Most comments were negative
8. CSS sucks!
No it doesn’t! You suck at using it.
No I don’t, browsers don’t support it.
9. CSS sucks!
No it doesn’t! You suck at using it.
No I don’t, browsers don’t support it.
Well.
10. CSS sucks!
No it doesn’t! You suck at using it.
No I don’t, browsers don’t support it.
It’s Microsoft’s fault.
It’s not really Microsoft’s fault, the way we learn how to use CSS is a bit weird
11. 1. Understand a little more about CSS
2. Have a go at SASS & Compass
Hopefully at the end of these slides, you’ll feel better about CSS, and you’ll give SASS & Compass a try
12. .selector {
property: value;
}
So we’re on the same page, here’s the terminology. This is a CSS class
13. .selector {
property: value;
}
We use selectors to target HTML elements
14. .selector {
property: value;
}
We use properties to apply styles. There are over 150 properties in CSS2
15. .selector {
property: value;
}
A CSS class is a collection of property value pairs
16. 1. Styles may not work
Many properties depend on the display value
Has anyone ever added some styles, only to refresh the browser to see nothing change? It’s probably because the element has the
wrong display value
18. span
{
display:
inline; ‹ from the browser’s stylesheet
height:
100px;
}
SPANS inherit a display value of inline from the browser’s stylesheet
19. span
{
display:
block;
height:
100px;
}
If you override that value, and make the SPAN a block, it will work
20. div
{
from the browser’s stylesheet ›
position:
static;
top:
10px;
}
Likewise if you add a property of top, it won’t work
21. div
{
position:
relative;
top:
10px;
}
If you change the position of the DIV from static to relative, it will work
22. 2. Values affect other values
The browser computes a lot of stuff
The browser computes every value that is not in pixels when your stylesheet loads
23. body
{
font-‐size:
12px;
}
div
{
font-‐size:
2em;
}
<body>
<div>
<div></div>
</div>
</body>
So if we have this HTML & CSS
24. body
{
font-‐size:
12px;
}
div
{
font-‐size:
2em;
}
<body>
<div>
<div></div> calculates to › (12px
x
2)
=
24px
</div>
</body>
This DIV will have a font-size of 24px
25. body
{
font-‐size:
12px;
}
div
{
font-‐size:
2em;
}
<body>
<div>
<div></div> calculates to › (24px
x
2)
=
48px
</div>
</body>
This DIV will have a font-size of 48px. Often when a browser computes a value, it uses the parent’s value as a reference
26. span
{
display:
inline; calculates to › block
float:
left;
}
Likewise if I float an element, the browser will compute the display value as block. That’s kind of important to know
27. 3. The total element size is computed
You may have heard of the box model debacle
The browser computes a lot of stuff, it’s true
28. div
{
width:
100px; the width on screen › 100px
}
If you have a DIV with a width of 100px, it’s correct when you view it
29. div
{
width:
100px; the width on screen › 120px
padding:
10px;
}
If you add padding, what you see on screen when you view it will actually be 100px + 10px + 10px
30. div
{
width:
100px; the width on screen › 122px
padding:
10px;
border:
1px;
}
Likewise if you also add a border, the width you see on screen is 100px + 10px + 10px + 1px + 1px
31. 4. there’re only two ways to flow
4. Elements belong to a position
Float and position disrupt the flow
Float and position are the only ways to change layout in CSS 2, which is sad, because they’re not very good at their jobs
32. <div>Top</div>
<div>Middle</div>
<div>Bottom</div> Top
Middle
Bottom
Let’s say I have this HTML and it generates the boxes on the right. They belong in the same flow, appearing in sequence one after
the other as I would expect
33. <div>Top</div>
<div
class="blue">Middle</div>
<div>Bottom</div> Top
Middle
Bottom
I’ll make one blue
34. <div>Top</div>
<div
class="blue">Middle</div>
<div>Bottom</div> Top
.blue
{
float:
left;
}
Middle
Bottom
And I’ll float it
35. <div>Top</div>
<div
class="blue">Middle</div>
<div>Bottom</div> Top
.blue
{
float:
left;
}
Middle
Bottom
The bottom DIV slides up, as if the blue DIV isn’t even there. Floating puts elements “above and below” of each other, instead of
“side by side”
36. <div>Top</div>
<div
class="blue">Middle</div>
<div>Bottom</div> Top
.blue
{
float:
left;
}
Middle Bottom
Content from other elements will not hide beneath floating elements
37. <div>Top</div>
<div
class="blue">Middle</div>
<div>Bottom</div> Top
.blue
{
float:
left;
}
Bottom
Note that floating does not affect how other boxes are drawn
38. <div>Top</div>
<div
class="blue">Middle</div>
<div>Bottom</div> Top
.blue
{
position:
absolute;
}
Middle
Bottom
Positioning is the same as floating, except content from other DIVs will hide underneath
39. <div>Top</div>
<div
class="blue">Middle</div>
<div>Bottom</div> Middle
Top
.blue
{
position:
absolute;
top:
0px;
left:
0px; Bottom
}
And you can also add other properties, like top, left, right, bottom and z-index
40. 5. Layout affects browser calculation
5. browsers miscalculate
It’s the browser calculation that makes CSS painful
When you use float or position, it changes the way the browser will calculate surrounding DIVs
41. <div
class="parent">
<div
class="child"></div>
</div>
.parent
{
height:
auto; ‹ from the browser’s stylesheet
}
.child
{
height:
auto;
}
Let’s say I have this HTML and CSS
42. <div
class="parent">
<div
class="child"></div>
</div>
.parent
{
height:
auto;
parent height is › 100px
}
.child
{
height:
100px;
}
If I give the child of 100px, the parent DIV will have a height of 100px. The browser uses child elements to calculate the height
and width of a parent element
43. <div
class="parent">
<div
class="child"></div>
</div>
.parent
{
height:
auto;
parent height is › 0px
}
.child
{
height:
100px;
float:
left;
}
The parent will no longer use floated child elements to calculate its height, so as far as the browser is concerned, the parent DIV
is empty
44. 1. Styles may not necessarily work
Properties can “toggle” other properties on and off
2. Values affect other values
The browser calculates a lot of stuff when your stylesheet loads
3. The total element size is computed
The box model can be a little confusing
4. Elements belong to a flow
Float and position affect the flow
5. Layout affects browser calculation
This makes CSS pretty painful
CSS is still hard today, and it’s mostly because of browser calculations
45. CSS3 will fix most of that stuff
But vendors implement the fixes inconsistently
CSS3 will fix most of those issues, but vendors implement the fixes differently and at different times
46. Now a short tangent. Here I am back in 2000. I have my lap top. I’m feeling cool. I’m wearing sandals and socks
47. When I write my web app, I decide what browsers I’ll support
48. function
listen(fn){
//
I
want
to
add
multiple
event
handlers
}
function
grab(id){
//
I
want
to
grab
an
element
from
the
DOM
}
function
update(elm){
//
I
want
to
update
the
innerHTML
of
an
element
}
Remember JavaScript before libraries? You need to write custom functions yourself for basic tasks
49. My JavaScript
I have to make sure it works in all browsers, likewise I have to educate my colleagues on the custom functions I’ve written. Hard
stuff
50. JavaScript Library
When JavaScript libraries became popular, I could depend on the library to take are of browser discrepancies. They created a base
for all developers to work from, and your experience working in a library could transfer from job to job
52. SASS is a CSS preprocessor
CSS will no longer be a long string
Variables have been discussed for a decade. Why wait for browsers to implement them? The future of CSS is moving towards
being a more programmatic language. SASS is the preprocessor we’ll look at now
53. gem install sass
You need Ruby, you can install SASS with the command prompt or through terminal
54. .box
{}
.box
.content
{}
.box
.content
p
{}
.box
.content
p
a
{}
If you write CSS for sites you end up duplicating classes. There is no standard structure for a CSS file, it’s up to the developer to
create one
55. .box
{
.content
{
p
{
a
{} nest selectors
}
}
}
A CSS preprocessor will let you nest selectors, letting you group your CSS classes together
56. a:link
{
color:
blue;
}
a:visited
{
color:
purple;
}
a:active
{
color:
blue;
}
a:hover
{
text-‐decoration:
underline;
}
a.red
{
color:
red;
}
This is pretty common in CSS, marking each pseudo element
57. a
{
color:
blue;
&:visited
{
color:
purple;
}
&:active
{
color:
blue;
}
parent selectors
&:hover
{
text-‐decoration:
underline;
}
&.red
{
color:
red;
}
}
You can use parent selectors to add pseudo elements and classes to your HTML elements
58. a
{
color:
blue;
&:visited
{
color:
purple;
}
&:active
{
color:
blue;
}
parent selectors
&:hover
{
text-‐decoration:
underline;
}
&.red
{
color:
red;
}
}
So this would output CSS with an A link and a class of red
59. $width:
1000px;
.container
{
width:
$width;
} variables
.column
{
width:
$width;
}
You can use variables like any other programming language
60. $width:
1000px;
.container
{
width:
$width;
} math
.column
{
width:
$width
/
2;
}
You can even use math
61. @mixin
text
{
color:
#000;
font-‐size:
12px;
}
.box
{
@include
text;
mixins
}
.baz
{
@include
text;
}
You can use mixins to create a template of styles, and use them in classes throughout your document
62. @mixin
text($color:
#000)
{
color:
$color;
font-‐size:
12px;
}
.box
{
@include
text(#F00);
arguments
}
.baz
{
@include
text;
}
Mixins can have arguments, like JS functions, and you can pass values to the mixins
63. $color:
blue;
p
{
color:
darken($color,
10%);
&.disabled
{
color functions
color:
grayscale($color);
}
}
You can use color functions. For example you can have a base color, and modify that with functions like darken, lighten and
grayscale
64. .box
{
color:
#000;
width:
100px;
}
.big-‐box
{
extend
@extend
.box;
font-‐size:
14px;
}
You can extend classes to mimic inheritance in normal programming languages
65. $color:
blue;
p
{
@if
$color
==
blue
{
color:
blue;
} if statements
@else
{
color:
red;
}
}
You can use if & else statements to give your CSS logic
66. @for
$i
from
1
through
3
{
.item-‐#{$i}
{
width:
10px
*
$i;
for loops
}
}
You can use for loops, to output a bunch of similar CSS
67. @mixin
round-‐corners($x)
{
@if
$x
>
3px
{
@warn
"That's
too
round!";
}
@include
border-‐radius($x);
} warnings
.box
{
@include
round-‐corners(5px);
}
You can even add warnings that will print when you compile your files
68. $
sass
-‐i
>>
1px
+
1px
+
1px
3px shell
>>
#777
+
#888
#fff
SASS has a shell like Ruby, so you can test your functions before using them
69. compass is a collection of mixins
http://compass-style.org
Compass is a collection of SASS mixins that are already written for you
72. $blue:
#0089B3;
a
{
color:
$blue;
&:hover
{
color:
darken($blue,
10%);
write some .scss
}
&:active
{
color:
invert($blue);
}
&:visited
{
color:
darken($blue,
30%);
}
}
Write some CSS, in this example I’m using variables and color functions
73. a
{
color:
#0089b3;
}
a:hover
{
color:
#006280;
}
a:active
{ compass compile
color:
#ff764c;
}
a:visited
{
color:
#00141a;
}
Run “compass compile” and here is the CSS it will output
74. compass watch
watches your .scss files for changes
Run this command to have Compass automagically detect when your files changes, and it will compile it for you
75. .box
{
@include
border-‐radius(10px);
}
border-radius
You can then easily use mixins like border-radius
77. $blue
=
#0089B3;
a
{
@include
link-‐colors(
$blue,
darken($blue,
10%),
link-colors
invert($blue),
darken($blue,
30%)
);
}
Or link colors
78. ul
{
@include
pretty-‐bullets("bullet.png");
}
pretty bullets
Or pretty bullets
79. <body>
<div
id="root">
<div
id="root_footer"></div>
</div>
<div
id="footer">
Footer
content
goes
here. sticky footer
</div>
</body>
@include
sticky-‐footer(100px);
Or you can even automatically create CSS for a sticky footer
80. compass will handle the vendor stuff
output styles
Notice I haven’t shown you much CSS, because you don’t need to look at it. Compass will handle everything for you, and it will
just work
81. it will output errors
And like any compiled language, it will output errors if you’ve made some syntax mistakes
82. gem update sass
gem update compass
Best of all if there are any updates to CSS properties, or a new browser enters the market, just update your gems, recompile, and
you’re done